MVC: результат из JSON Автоматически заполнить представление

0

Я застрял в публикации результатов от JSON, поэтому оставил часть успеха пустой.

Посмотреть

@model MvcApplication2.Models.About

@{
    ViewBag.Title = "About";
}


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

Модель

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

контроллер

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 во внешнем файле

$(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
        });
    });
});

=> Я немного смущен. Хотя я получил результат в формате JSON с использованием AJAX, я хочу опубликовать его в этом представлении "О". В представлении уже определен параметр @model, поэтому, как только я получу результат, я хочу, чтобы представление загружало его автоматически, так как я не считаю его хорошим вариантом для создания элементов управления html в Javascript.

=> Возможно ли, или я должен заполнить элемент управления один за другим.

=> Я новичок в MVC, так что вы могли бы сообщить мне какое-нибудь хорошее предложение.

Теги:
asp.net-mvc

3 ответа

0
Лучший ответ

Вам нужно предоставить своим элементам определенный id или класс, который позволит вам легко взаимодействовать с ними на клиенте. Затем, когда вы получите ответ, возьмите значения из данных JSON и обновите элементы (используя id/class для его поиска) с новым значением. Я предполагаю, что у вас нет специального шаблона, определенного для ваших строк, при необходимости отрегулируйте селектор кода, если это необходимо.

Посмотреть

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

Код клиента

$(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
        });
    });
});
Поделиться
  • 0
    Ну, хотя это так, но это не то решение, которого я ожидаю. С моей точки зрения, с точки зрения @model, каждый элемент DOM связан с ним. Поэтому, когда я получаю результат из JSON, я хочу, чтобы эти элементы DOM заполнялись автоматически. В противном случае объявление «@model» поверх представления бесполезно.
  • 0
    @LakpaSherpa - вы неправильно понимаете представление и отображаемый HTML-код в браузере. На стороне сервера модель используется для генерации HTML. Браузер ничего не знает о коде Razor на сервере, и на клиенте вы должны напрямую взаимодействовать с HTML.
Показать ещё 1 комментарий
1

контроллер:

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

JQuery:

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

В главном окне:

<div id="aboutDiv"><div>
Поделиться
  • 0
    Спасибо. позвольте мне попробовать это тоже.
0

Вместо того, чтобы возвращать данные, вам нужно будет вернуть представление в виде строки и использовать jquery для замены результата.

контроллер:

    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();
        }
    }

Затем, используя jquery, вы можете заменить результат в контейнере, например: div следующим образом:

    $.ajax({
        type: 'GET',
        dataType: 'Json',
        url: '/Home/About',
        success: function (result) {
             $("#divId").replaceWith(result);
        },
Поделиться
  • 0
    Нет смысла использовать JSON, если вы собираетесь вернуть HTML. Просто верните HTML и пропустите кодировку JSON.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню