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>

Impinge

Do you want to render a partialview on AJAX FORM POST? If that is the requirement, I will give you a sample. – Repugn

@Repugn 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. – Impinge

@Repugn On the other hand, I need to render the partial view as for now, before submitting the form (by change of dropdownlist's selectedindex. – Impinge

@Repugn Any reply pls. for this problem? – Impinge

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. – Repugn

@Repugn 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 controller, 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. – Impinge

you should try to build your ajax post request without HTML helper – Frederick

Answer 1

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.

Frederick

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? – Impinge

you can find all element you want to assign a value with javascript or jquery after your partial view completely rendered. – Frederick

I tried to apply Laviak's method on this page but it did not solved the problem (although the model is filled, an empty model returns from view to the controller). Any idea? – Impinge

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.. – Frederick

Thanks. The only problem is to pass filled model to the controller. If I can pass the filled model, the problem will be solved. – Impinge

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+ – Impinge