Why PartialView cannot reload with Ajax in MVC

Question

I use a popup window to create a new record and I render a view inside the window. In addition to this, I call a partialview in this view according to the selectedindex of a combobox in it. I can successfully post the form to the Controller and return it to the view when there is an error. However, after returning the form, only the view part returns and I cannot render the partialview. So, how can I also render partialview as the last status just before submitting the form?

View:

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>



<div id="target">

@using (Ajax.BeginForm("_Create", "Issue",
        new AjaxOptions
        {
            HttpMethod = "POST",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "target"
        }
        ))
{

    @Html.AntiForgeryToken()

    <div class="container">

        @Html.ValidationSummary(true)

        @Html.LabelFor(m => m.ProjectID)
        @(Html.Kendo().DropDownList())
        //... some stuff (removed for clarity)

        @*Render Partialview according to Dropdownlist's selectedIndex*@
        <!-- Place where you will insert your partial -->
        <div id="partialPlaceHolder" style="display:none;"></div>

    </div>

    <div class="modal-footer">
        @(Html.Kendo().Button()
                .Name("btnCancel")
        )
        @(Html.Kendo().Button()
            .Name("btnSubmit")
        )
    </div>
}

</div>


<script>

//Render Partialview according to Dropdownlist's selectedIndex
$('#ProjectID').change(function () { /* This is change event for your dropdownlist */

    /* Get the selected value of dropdownlist */
    var selectedID = $(this).val();

    /* Request the partial view with .get request. */
    $.get('/Issue/RenderPartialView/' + selectedID, function (data) {
        /* data is the pure html returned from action method, load it to your page */
        $('#partialPlaceHolder').html(data);            
    });

});

</script>

Do you want to render a `partialview` on `AJAX FORM POST`? If that is the requirement, I will give you a sample. — ramiramilu, Jun 16 '15 at 13:29
@ramiramilu It might be ok for me if there is a sample you have. I am not sure if I can achieve the solution with this, but I think let's have a try. I am waiting for your answer. — Jack, Jun 16 '15 at 13:36
@ramiramilu On the other hand, I need to render the partial view as for now, before submitting the form (by change of dropdownlist's selectedindex. — Jack, Jun 16 '15 at 13:38
I am still not able to understand your question. Can you please describe in simple way. I will get you sample, but its midnight in India. I will get youbsample first thing in morning. — ramiramilu, Jun 16 '15 at 19:22
@ramiramilu Sorry. As a summary, I render a `partialview` in the view above and post all the model data to the `controller`. When there is an error and return the `view` from `controlle`r, the `view` is reloaded, but the `partialview` not. I also want to reload `partialview` after returning it from the `controller`. **Please also note that the partialview is rendered onChange of the dropdownlist**. — Jack, Jun 16 '15 at 21:04
you should try to build your ajax post request without HTML helper — Dion Dirza, Jun 17 '15 at 07:48

score 2 · Accepted Answer · answered Jun 17 '15 at 08:05

2

You need to do custom ajax post without HTML helper in this case. Create a normal form :

<form id="frmEdit" class="form">
    @Html.AntiForgeryToken()
    <div class="container">
        @Html.ValidationSummary(true)
        //.... rest form component
        <button id="btnSubmit" type="submit">Submit</button>
    </div>
</form>

and do post by jquery similar like this

<script>
$( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    $.post(urlPost, $(this).serialize()).done(function(){
        // update your target id here and re-fetch your partial view
    }).fail(function() {
        // show error in validation summary
    });
});
</script>

Hope this sample help you solve the problem.

answered Jun 17 '15 at 08:05

Dion Dirza

2,575
2
17
21

Thanks for your answer. Yes, this time I can rendered the `partialview`, but the inputs in it are **empty**. I think I have to pass the model data to the `partialview` as `selectedID`, but I can't. Could you please have a look at the function `$('#ProjectID').change(function () {}` and clarify me **how can I pass the model data** in this method? – Jack Jun 17 '15 at 09:35
you can find all element you want to assign a value with javascript or jquery after your partial view completely rendered. – Dion Dirza Jun 17 '15 at 09:50
I tried to apply Laviak's method on [this](http://stackoverflow.com/questions/1518417/how-to-send-a-model-in-jquery-ajax-post-request-to-mvc-controller-method) page but it did not solved the problem (although the model is filled, an empty model returns from view to the controller). Any idea? – Jack Jun 17 '15 at 10:27
Still i cant pinpoint where is the problem. Could you make a sample project that reproduce your current problem and upload somewhere else.. Maybe i can solve it.. – Dion Dirza Jun 17 '15 at 11:02
Thanks. The only problem is to pass filled model to the controller. If I can pass the filled model, the problem will be solved. – Jack Jun 17 '15 at 11:04
Many thanks for your replies. With the help of you, finally I have managed to reload the partialview with its model data in case there is a problem in the Controller and returning to the View. Voted+ – Jack Jun 17 '15 at 13:43

Why PartialView cannot reload with Ajax in MVC

1 Answers1

Linked