How to display view obtained from C# in JS?

Question

I need to display a View obtained from ASP.NET controller method.How to do that?

[HttpGet]
  public ActionResult B(string Email, string Password)
  {
  //some code
  return View();
  }

js


function A() {             
   $.get("/Home/B", {
   "Email": document.getElementById("Email").value,
   "Password": document.getElementById("Pass").value
   },

    function (data) {
       //  ......
    });

What to write in function (data) to receive and display a returned View()?

The view returned is html. you can append the html in a div or anywhere you can show — Hannan Ayub, Aug 20 '19 at 08:46

score 1 · Accepted Answer · answered Aug 20 '19 at 08:49

The 'data' returned from ajax Callback is the HTML of the view. You can show it an html element.

function A() {             
                    $.get("/Home/B", {
                        "Email": document.getElementById("Email").value,
                        "Password": document.getElementById("Pass").value   },
                     function (data) {
                         $('#div-where-you-want-to-show-view').html(data);

                     });

Without Jquery:

document.getElementById("div-where-you-want-to-show-view").innerHTML = data;

score 0 · Answer 2 · answered Aug 20 '19 at 08:47

0

If you're using jQuery, this is what you are looking for

function (resultingHtml) {
   $(".the-div-you-are-displaying-the-results-in").html(resultingHtml);
}

answered Aug 20 '19 at 08:47

Steven Lemmens

690
5
13

Can I do that without `div`?For example, redirect to returned page? – Dex2345 Aug 20 '19 at 08:58
@Dex2345 I think this is what you are looking for: https://stackoverflow.com/questions/20011282/redirecttoaction-not-working-after-successful-jquery-ajax-post – Hannan Ayub Aug 20 '19 at 09:04
@Dex2345 It seems that you are using jQuery to display something asynchronously, which is called `ajax` request. But redirecting the user to a page doesn't need to use ajax. You can just redirect the user directly from the server. (HTTP 302 response). Please be clear about what you are doing: To display something without refreshing (ajax), or to redirect the user to a new page. – Anduin Xue Aug 20 '19 at 09:04
Yes, don't redirect to that page. You don't need AJAX to do this just post your form to the correct url instead. – Steven Lemmens Aug 20 '19 at 09:14

M_Idrees · Answer 3 · 2019-08-20T09:58:09.217

Although a better approach for the given scenario could be to use Partial Views. From your action method return a Partial View and call/load that action method like this:

$("#divToDisplay").load("/home/B", 
           { 
              Email: document.getElementById("Email").value
             , Password: document.getElementById("Pass").value 
            }
          );

And In this approach you are using, you just have to use the html() method to render the returned html content from view.

function A() {             
   $.get("/Home/B", {
   "Email": document.getElementById("Email").value,
   "Password": document.getElementById("Pass").value
   },

    function (data) {
        $("#divToDisplay").html(data);
    });

Where divToDisplay is the id of any div in your html content where you want to place the view's html.

How to display view obtained from C# in JS?

3 Answers3