Can you just update a partial view instead of full page post?

Question

Is there a way to submit a partial view form in asp.net mvc without reloading the parent page, but reloading the partial view only to its new state? Similar to how knockout.js updates using data-bind.

My data table renders with a variable number of columns/names so I don't think knockout.js is an option for this one, so I am trying to use a partial view instead.

Answer 1

Not without jQuery.

What you would have to do is put your Partial in a div, something like:

<div id="partial">
    @Html.Partial("YourPartial")
</div>

Then, to update (for example clicking a button with the id button), you could do:

$("#button").click(function () {
   $.ajax({
       url: "YourController/GetData",
       type: "get",
       data: $("form").serialize(), //if you need to post Model data, use this
       success: function (result) {
           $("#partial").html(result);
       }
   });
})

Then your action would look something like:

public ActionResult GetData(YourModel model) //that's if you need the model
{
    //do whatever

    return View(model);
}

Answer 2

Actually, if your Partial has a child action method, you can post (or even use an anchor link) directly to the child action and get an Ajax-like affect. We do this in several Views.

The syntax is

@Html.Action("MyPartial")

The Child Action is

public ActionResult MyPartial()
{
    return PartialView(Model);
}

If your form posts to the child action

@using (Html.BeginForm("MyPartial"))
{
    ...
}

The Partial View will be updated with the partial view returned from the child action.

Jquery is still a legitimate way to update a partial. But technically, the answer to your question is YES.

Answer 3

As normal what I find when looking for things like this is people give too limited information so I will attempt to help here. The key is to set up a div with an ID you can append the return html to. Also when hitting your controller make sure it returns the partial. There are some potential problems with this method but on a good day it should work.

<div id="CategoryList" class="widget">
    @{
        Html.RenderPartial("WidgetCategories.cshtml");
    }
</div>

          function DeleteCategory(CategoryID) {
            $.get('/Dashboard/DeleteWidgetCategory?CategoryID=' + CategoryID,
                function (data) {
                    if (data == "No") {
                        alert('The Category has report widgets assigned to it and cannot be deleted.');
                    }
                    else {
                        $('#CategoryList').html(data);
                    }

                }
            );
        }


    [HttpGet("DeleteWidgetCategory")]
    [HttpPost("DeleteWidgetCategory")]
    public IActionResult DeleteWidgetCategory(string CategoryID)
    {
        string Deleted = CategoryModel.DeleteCategory(CategoryID);

        if (Deleted == "Yes")
        {
            return PartialView("WidgetCategories");
        }
        else
        {
            return this.Json("No");
        }
    }

Answer 4

I would use the Ajax Form helper for such scenarios using a partial view and @html.RenderPartial("partialName") partial helpers

Answer 5

In your Main View

<div id=SearchResult>
   @Html.Partial("_NameOfPartialView", Model)
</div>

<input type="button" id="btnSubmit" value="Submit">

In your Javascript file

$('#btnSubmit').click(function () {
    GetData(Id);
});

function GetData(Id){
  $.ajax({
     url: "/Home/GetEmployee/",
     type: "get",
     data: { Id:Id },
     success: function (result) {
     $('#SearchResult').html(result);
     }
   });
}

In your Home Controller

public ActionResult GetEmployee(int Id)
{
   var employee= context.Employee.Where(x=> x.EmployeeId == Id)

   return this.PartialView("_NameOfPartialView", employee);
}