自刷新局部视图

Question

I set up a small demo application for refreshing partial views via jQuery/Ajax. I found a variety of examples refreshing the partial view from the main view, though not one where it refreshes from the view itself.

This is the code i tried to use:

Main View:

@model OrpheusTestWeb.Models.ViewModel
@{
    ViewBag.Title = "Home Page";
}
<h2>Guid1: @Model.GUID1</h2>
<div id="PartialViewDIV">
    @Html.Partial("_PartialView", Model.GUID2)
</div>

The partial view

@model string

<h3>Guid2: @Model</h3>

<input id="button" type="button" class="btn-danger" />

<script type="text/javascript">
    $("#button").on('click', function () {
        $.ajax({
            url: "Partial/Index",
            type: "get",
            dataType: "html",
            success: function (result) {
               $("#PartialViewDIV").html(result); //the PartialViewDIV-tag is in the main view, how can i "redirect" it then?
               console.log('success', data);
            }
        });
    }
</script>

And the controller for the partial view:

public class PartialController : Controller
    {
       public ActionResult Index()
       {
           return PartialView("_PartialView", Guid.NewGuid().ToString());
       }
    }

What is going wrong here? Thank you in advance!

Answer 1

Why not return json? Do something like this:

  public class PartialController : Controller
{
    [HttpGet]
    public JsonResult Index()
    {
        return Json(new { _PartialView = Guid.NewGuid().ToString()},JsonRequestBehavior.AllowGet);

    }
}

<script type="text/javascript">
$("#button").on('click', function () {

    $.ajax({
        url: "Partial/Index",
        type: "get",
        dataType: "html",
        success: function (result) {
            var json = $.parseJSON(result);
            $('#YourId').remove();
            $('#PartialViewDIV').append('<div id="YourId">' + json._PartialView + '</div>');
            //$("#PartialViewDIV").html(result); //the PartialViewDIV-tag is in the main view, how can i "redirect" it then?
           // console.log('success', data);
        }
    });
});