MVC：JSON的结果自动填充视图

Question

I am stuck in publishing the result from JSON so left the success portion blank.

View

@model MvcApplication2.Models.About

@{
    ViewBag.Title = "About";
}


<p> @Html.DisplayFor(m=>m.test) </p>
<p> @Html.DisplayFor(m=>m.test1) </p>

Model

public class About
    {
        public string test { get; set; }
        public string test1 { get; set; }
    }

Controller

public class HomeController : Controller
    {
       public JsonResult About()
        {
            ViewBag.Message = "Your app description page.";
            About ab = new About()
                              {
                                  test = "a",
                                  test1 = "b"
                              };
            return Json(ab, JsonRequestBehavior.AllowGet);
        }
}

JQuery in external file

$(document).ready(function () {

    var itemName = "#btn-about";

    $(itemName).click(function () {
        $.ajax({
            type: 'GET',
            dataType: 'Json',
            url: '/Home/About',
            success: function (data) {
                var option = '';

            },
            error: function (xhr, ajaxOption, thorwnError) {
                console.log("Error")
            },
            processData: false,
            async: true
        });
    });
});

=> I am a bit confused now. Altough I get a result in JSON format using AJAX, I want to publish it in this View 'About'. The View already have @model defined, so as soon as I get the result, I want the view to load it automatically as I don't think its a good option to create html controls in Javascript.

=> Is it possible or do I have to fill control one by one.

=> I am new in to MVC, so could you let me know any good suggestion.

Answer 1

Controller:

public ActionResult About()
{
    var model = repo.GetModel();
    return PartialViewResult("about", model);
}

jQuery:

$.ajax("/Controller/About/", {
    type: "GET",
    success: function (view) {
        $("#aboutDiv").html(view);
    }
});

In Main View:

<div id="aboutDiv"><div>

Answer 2

You need to give your elements some id or class that will allow you to interact with them easily on the client. Then, when you get your response, take the values from the JSON data and update the elements (using the id/class to find it) with the new value. I'm assuming you don't have any special template defined for your strings, adjust the selectors in the code as necessary to account for it if you do.

View

<p class="testDisplay"> @Html.DisplayFor(m=>m.test) </p>
<p class="test1Display"> @Html.DisplayFor(m=>m.test1) </p>

Client code

$(document).ready(function () {

    var itemName = "#btn-about";

    $(itemName).click(function () {
        $.ajax({
            type: 'GET',
            dataType: 'Json',
            url: '/Home/About',
            success: function (data) {
                $('.testDisplay').html(data.test);
                $('.test1Display').html(data.test1);
            },
            error: function (xhr, ajaxOption, thorwnError) {
                console.log("Error")
            },
            processData: false,
            async: true
        });
    });
});

Answer 3

Instead of returning the data you will have to return the view as string and the use jquery to replace the result.

Controller:

    public JsonResult About()
    {
        var model = // Your Model
        return Json((RenderRazorViewToString("ViewNameYouWantToReturn", model)), JsonRequestBehavior.AllowGet);
    }

    [NonAction]
    public string RenderRazorViewToString(string viewName, object model)
    {
        ViewData.Model = model;
        using (var sw = new StringWriter())
        {
            var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
            var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
            viewResult.View.Render(viewContext, sw);
            viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
            return sw.GetStringBuilder().ToString();
        }
    }

Then using jquery you can replace the result in container for eg: div as follows:

    $.ajax({
        type: 'GET',
        dataType: 'Json',
        url: '/Home/About',
        success: function (result) {
             $("#divId").replaceWith(result);
        },