Geek Answers Handbook

Return string from MVC controller in jQuery

I want to make an ASP.NET MVC4 Controller call and return a string to it in the jQuery method, and then output that string using alert (). The code below only outputs an object Object .

JQuery

 $launchTRs = function (appID) { var html = $.get("/PartialView/GetTRAsString?appID=" + appID, function (data) { }); alert(html.toString()); }

ASP:

 public string GetTRAsString(string appID) { // Populate revisions string html = "<ul>"; foreach(RevesionInfo revInfo in revisions) { html += "<li>" + revInfo.RevDesc + "</li>"; } html += "</ul>"; return html; }

Outut:

 [object Object]
+6
source share
4 answers

ASP.NET MVC controller actions do not return rows. They return ActionResults.

So, start by fixing your action (read below to see why I put italics in italics because this is only the first step):

 public ActionResult GetTRAsString(string appID) { // Populate revisions string html = "<ul>"; foreach(RevesionInfo revInfo in revisions) { html += "<li>" + revInfo.RevDesc + "</li>"; } html += "</ul>"; return Content(html, "text/html"); }

Also, the first letter A in AJAX means Asynchronous, so you should put a warning in your success callback, which is the only place where the result will be available:

 $.get('/PartialView/GetTRAsString', { appID: appID }, function (data) { alert(data); });

Also remember that generating HTML in a controller action is a terrible idea. Mixing C # and HTML leads to ugliness, which I prefer not to comment on.

In ASP.NET MVC V stands for View, so use them. The purpose of the controller’s action is to select a model and transfer this model to a view for projecting it:

 public ActionResult GetTRAsString(string appID) { IEnumerable<Revision> revisions = ... go get your revisions from the DB or something return PartialView(revisions); }

and then your view will be strongly typed for the model, and you will create the necessary markup inside:

 @model IEnumerable<Revision> <ul> @foreach (var revInfo in Model) { <li> @revInfo.RevDesc </li> } </ul>
+22
source

Try the following:

 var html = ""; $.ajax({ url: "/PartialView/GetTRAsString", method: 'GET', data: {appId: appID }, success: (resp){ html = resp.html; } });

Then your action method will be:

 public JsonResult GetTRAsString(string appID) { // Populate revisions string html = "<ul>"; foreach(RevesionInfo revInfo in revisions) { html += "<li>" + revInfo.RevDesc + "</li>"; } html += "</ul>"; return Json(new {html}); }
+8
source

Another solution using AJAX -

Controller action -

  public ActionResult GetString(string input) { return Content(input + ", Hello!!!"); }

View -

 <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script> $(function () { $('#click1').click(function (e) { $.ajax({ url: "@Url.Action("GetString")", type: "GET", dataType: "json", data: { input: 'John' }, error: function (response) { alert(response.responseText); }, success: function (response) { alert(response); } }); }); }); </script> <input type="button" value="Click Me" id="click1" />

And when you click -

enter image description here

+8
source

It suggests returning JSONResult, since this is the most common practice for such cases + use a template engine, for example, Mustache or something else, and not just fill the template manually in the values ​​on the server side.

like this:

server:

 public JSONResult ActionName() { var result=new { Success="False", Message="Error Message"}; return Json(result, JsonRequestBehavior.AllowGet); }

customer material:

 var template = "<h1>{{your property values here}}</h1>", html = ''; $('#sampleArea').html(html); $.getJSON('YourController/ActionName', function(data) { html = Mustache.to_html(template, data); });

Additional information above:

+1
source

More articles:


All Articles