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
– ramiramilu, Commented Jun 16, 2015 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
– Jack, Commented Jun 16, 2015 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
– Jack, Commented Jun 16, 2015 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
– ramiramilu, Commented Jun 16, 2015 at 19:22

Dion D. · Accepted Answer · 2015-06-17 08:05:35Z

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, 2015 at 8:05

Dion D.

2,5962 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jack Over a year ago

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?

Dion D. Over a year ago

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

Jack Over a year ago

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?

Dion D. Over a year ago

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

Jack Over a year ago

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

|

Collectives™ on Stack Overflow

Why PartialView cannot reload with Ajax in MVC

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related