MVC4 Update Partial view

Question

I am developing a simple MVC application.

I have main view, partial view and controller.

This is my main View

@model partitalViewTest.Models.Qset         


        

Answer 1

The button will load only partial view.Instead of button, You can use Ajax.ActionLink to update some empty div on the page with partial view as reponse.
Here is a demo.

@Ajax.ActionLink("Link Text", 

                 "CheckAnswer",

                 new { Id='A' },

                 new AjaxOptions
                     {    
                     UpdateTargetId="emptyDiv", 
                     InsertionMode = InsertionMode.Replace,
                     HttpMethod = "GET"

                 })

Answer 2

Your button click is doing this:

location.href='@Url.Action("CheckAnswer", "RazerQuestion", new { id = 'A' })    '"

which navigates the browser to the partial page.

I suspect what you want to happen is for the partial page content to be replaced with the updated content without refreshing the browser, or navigating away.

You can do with with JQuery.

First, give your an id:

<div id="content" class="transbox" style="height:inherit;"> 
   @Html.Partial("CheckAnswer",Model.partialModel)
</div> 

Second, do something similar to the following in response to the button click (error checking removed):

function doWork(){
    $.get('@Url.Action("CheckAnswer", "RazerQuestion", new { id = 'A' }'), function (data) {
        $('#content').html(data);
    });
}

Finally, change the button to do this:

<input id="Button1" type="button" value="button" onclick="doWork()" />

This will now:

• On click of the button...
• Fire the doWork() function, which will...
• Make the request to the CheckAnswer action, and then...
• Take the content of the request, and replace the <div /> content with the result