[ACCEPTED]-AJAX call on OnChange event in MVC-asp.net-mvc

Accepted answer
Score: 12

Here is a general idea how you'd implement 3 this.

<script type="text/javascript">
    // assuming you're using jQuery
    $("#ddlAjax").change( function (event) {
        $.ajax({
            url: "Controller/GetPartialGraph/" + $(this).val(),
            data: { id = $(this).val() /* add other additional parameters */ },
            cache: false,
            type: "POST",
            dataType: "html",

            success: function (data, textStatus, XMLHttpRequest) {
                $("#divPartialView").html( data ); // HTML DOM replace
            }
        });
    });
</script>

<select id="ddlAjax">
    ... list of options
</select>


<div id="divPartialView">
    <!-- something like this in your ASP.NET View -->
    <%= Html.RenderPartial("MyPartialView", Model) %>
</div>

Here is your controller action method.

[HttpPost]
public PartialViewResult GetPartialGraph(int id /* drop down value */)
{
    // do calculations whatever you need to do
    // instantiate Model object
    var model = myBusinessLogicService.DoCalculations(id);

    return PartialView("MyPartialView", model);
}

I 2 think this is the answer you are looking 1 for.

Score: 2

Ok, if what you want ia a way to call a 5 onchange event when a dropdownlist change 4 this can be helpful:

@Html.DropDownListFor(
                        model => model.SelectedId,
                        new SelectList(ViewBag.Ids, "Id", "Name"),
                        "[All]",
                        new { onchange = "onChangeId();", @id ="municipalityDropDown" }
                        )

then you can have this 3 javascript code and you ajax code. And here 2 is an example of a jax code to call a action 1 method.

function onChangeId() {
      jQuery.ajax({
            url: '@Url.Action("Action Method Name", "Controller Name")',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ data: data2 }),
            success: function (result) { }
        });  
    }
Score: 1

Look into using a partial view. There are 2 many links if you google ASP.Net MVC Partial 1 View but here is one I found intestering

http://blog.stevensanderson.com/2008/10/14/partial-requests-in-aspnet-mvc/

Score: 0

I'm not sure I completely understand what 11 you're trying to do, but in MVC the way 10 I would likely handle it is to chain together 9 a couple of AJAX calls. The first updates 8 the category ratings based on the selection. This 7 likely returns JSON so that you can easily 6 extract the ratings scores. The second takes 5 the ratings scores returned by the first 4 and calls an action that renders the chart 3 as HTML -- i.e., it renders a partial view 2 that is returned and inserted into the proper 1 place in the document.

Score: 0

Yes, that’s right – only change is replacing:

onchange = “this.form.submit();”

with:

onchange = “$(this.form).submit();”

found 1 it in this post

More Related questions