Jquery and Ajax inside ASP.NET How to update div with model

Question

In my app I am sending post request with string value with Jquery, then in controller, passed string value is used to get some data from API.

Next controller returns a view and model with data from API inside. That data from model I want to put inside values of few textboxes.

The main problem is that I dont know how to refresh that div with model values. When I used post form without jquery and ajax it works but I want to do it asynchronous.

Js script with post request:

<script type="text/javascript">

    $(document).ready(function () {

        $('#btn').click(function () {

            var data1 = $('#textBox').val();

            $.ajax({
                url: '/Home/Fill',
                type: 'POST',
                dataType: 'string',
                data: { number:data1 },
                success: function (data) {

                }

            });

        });
    });

Controller:

[HttpPost]
    public ActionResult Fill(string number)
    {

        CompanyInfo Info = new CompanyInfo();

        //Here some API actions

        return View("Index",Info);
    }

Div with model values inside the Index view:

<div id="target">

    <h1>Number:</h1>
    <input type="text" value="@Html.DisplayFor(m => m.Num)" id="Number" />

    <br />

    <h1>Company name:</h1>
    <input type="text" value="@Html.DisplayFor(m=>m.CompanyName)" id="CompanyName" />

    <br />

    <h1>Street Address</h1>
    <input type="text" value="@Html.DisplayFor(m=>m.StreetAddress)" id="Address" />

</div>

David · Accepted Answer · 2017-09-19 11:36:43Z

At this point you're not really working with "views and models" in the ASP.NET MVC sense, you're simply working with JavaScript/jQuery to update your DOM. How you do that depends on the data you have and is done entirely in here:

success: function (data) {

}

So what's in data?

This implies that you have HTML in data, perhaps even an entire page:

return View("Index",Info);

If that's the case, you probably want to select out of data the information you want. Is it the same page that you're already showing? If so then you can just replace the HTML you already have with the HTML from the page. Perhaps something like this:

var newTarget = $('#target', data).html();
$('#target').html(newTarget);

That should grab the HTML of the div id="target" from data and then set it to that same div in the current page.

If the HTML in data is different from the current page, then you would need to target what you're doing differently of course. But ultimately it's the same concept. Be aware that a side-effect of replacing HTML elements in your page with new elements is that any event binding you had on the old elements is lost.

Note that this isn't the most efficient way to do this. Returning an entire page when all you need is an updated model includes a lot of overhead that you just end up ignoring anyway. This would be a good opportunity to look into using WebAPI controllers in your project, where you could return plain objects:

return Info;

Or even just returning a JsonResult from your MVC controller would do the trick:

return Json(Info);

That way the data variable in your client-side code doesn't contain all of this unnecessary HTML, but instead contains just the information in the Info object. With that, you can simply update the values of your input elements directly. Perhaps something like this:

$('#Number').val(data.Num);
$('#CompanyName').val(data.CompanyName);
$('#Address').val(data.StreetAddress);

It's up to you how you want to approach it. But you definitely have options and can do a good bit of refactoring to simplify things.

Thank you very much for that answer. I used this Json option and everything works. I really appreciate your help and shared knowledge.

Roy Berris · Accepted Answer · 2017-09-19 11:27:04Z

0

You need to use the success: function(data) listener inside your AJAX request. Get your data and parse it into the div.

answered Sep 19, 2017 at 11:27

Roy Berris

1,6122 gold badges19 silver badges46 bronze badges

Collectives™ on Stack Overflow

Jquery and Ajax inside ASP.NET How to update div with model

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related