Binding Ajax response to ASP.NET MVC

Question

I'm new to ASP.NET MVC and have a little question.

I have a user model like this:

public class UserDetailsViewModels : ViewBaseModels
{
        [Display(Name = "Benutzername")]
        public string Username { get; set; }

        [Display(Name = "E-Mail")]
        public string Email { get; set; }

        [Display(Name = "Anmerkung")]
        public string Note { get; set; }
}

In my view I have this HTML markup:

<div class="form-group">
   @Html.LabelFor(x => x.Username)
   @Html.TextBoxFor(x => x.Username, new { @class = "form-control input-sm" })
</div>
<!-- /.form-group -->
<div class="form-group">
    @Html.LabelFor(x => x.Email)
    @Html.TextBoxFor(x => x.Email, new { @class = "form-control input-sm" })
</div>
<div class="form-group">
    @Html.LabelFor(x => x.Note)
    @Html.TextBoxFor(x => x.Note, new { @class = "form-control input-sm" })
</div>
<!-- /.form-group -->

I have a jQuery Ajax post in the document.ready, to call the controller. My controller looks like this:

[HttpPost]
public async Task<JsonResult> GetUser(UserDetailsViewModels m, int id)
{
    try
    {
        var dtsource = await RequestManager.DoGet<User>("User/" + id); //Call the API

        m.Email = dtsource.Email;
        m.Note = dtsource.Note;
        m.Username = dtsource.Username;

        return Json(m);
    }
    catch (Exception ex)
    {
        return Json(new { error = ex.Message });
    }
}

I know that I can bind the results to the text boxes via jQuery. My question is now, can I pass the result directly to the model. Unfortunately, I could not find the right one using Google

Hi, can you clarify whether you are having issues binding the results using jquery, or are you wanting the server to render a razor view with the updated details passed to the view via the model? — Henry Lu
– Henry Lu, Commented Feb 6, 2018 at 20:02
@HenryLu I wanting the server to render a razor view with the updated details — Hadda
– Hadda, Commented Feb 6, 2018 at 20:05
You can return PartialView("UserDetailPartial", m) and provide the markup in UserDetailParital.cshtml. Your ajax success would be $("target").html(result) where result is the html fragment from "UserDetailPartial". — Jasen
– Jasen, Commented Feb 6, 2018 at 20:20

Henry Lu · Accepted Answer · 2018-02-06 20:25:08Z

If you'd like the server to render the results on a razor view and return the html to the client, then what you're looking for are partial views.

you'll need to refactor the section of html to a partial view, then the action on your controller that is posted to should return this partial view.

afterwhich the jquery call should replace the div with the new rendered html

assuming your partial view is called "_User.cshtml" and is inside a folder called "Partial" in the corresponding views directory; then the Post method would be changed to

[HttpPost]
public async Task<ActionResult> GetUser(UserDetailsViewModels m, int id)
{
    var dtsource = await RequestManager.DoGet<User>("User/" + id); //Call the API

    m.Email = dtsource.Email;
    m.Note = dtsource.Note;
    m.Username = dtsource.Username;
    return PartialView("Partial/_User", m);
}

your jquery call would look something similar to this

$.ajax({
    url: getUserUrl,
    type: 'POST',
    success: function (result) {
        var targetDiv = $('#userInfo');
        targetDiv.empty();
        targetDiv.html(result);
    }
});

With your html moved into a partial view cshtml

<div class="form-group">
   @Html.LabelFor(x => x.Username)
   @Html.TextBoxFor(x => x.Username, new { @class = "form-control input-sm" })
</div>
<!-- /.form-group -->
<div class="form-group">
    @Html.LabelFor(x => x.Email)
    @Html.TextBoxFor(x => x.Email, new { @class = "form-control input-sm" })
</div>
<div class="form-group">
    @Html.LabelFor(x => x.Note)
    @Html.TextBoxFor(x => x.Note, new { @class = "form-control input-sm" })
</div>

and to promote re-use, your main html would render the partial instead of its own copy of the partial view by using

<div id="userInfo">
    @Html.Partial("Partial/_User", Model)
</div>

You can read up more on partial views https://learn.microsoft.com/en-us/aspnet/core/mvc/views/partial

Collectives™ on Stack Overflow

Binding Ajax response to ASP.NET MVC

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related