ASP.NET MVC。如何通过ajax视图返回修改答案

【问题标题】：asp.net mvc. How to return modified via ajax viewASP.NET MVC。如何通过ajax视图返回修改
【发布时间】：2016-12-25 08:51:41
【问题描述】：

我遇到了 ajax 问题。这是代码。

型号

public class ViewModel
{
    public long requestedVar { get; set; }
    public string ReturnedDescription { get; set; }
}

查看名称：AddNewInfo

   <head>
   <script>

    $.datepicker.regional['ru'] = {
            closeText: "Закрыть",
            prevText: "&#x3C;Пред",
            nextText: "След&#x3E;",
            currentText: "Сегодня",
            monthNames: [
                "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
                "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"
            ],
            monthNamesShort: [
                "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
                "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"
            ],
            dayNames: ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"],
            dayNamesShort: ["вск", "пнд", "втр", "срд", "чтв", "птн", "сбт"],
            dayNamesMin: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
            weekHeader: "Нед",
            dateFormat: "dd.mm.yy",
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: ""
        };
    </script>
    <script>
    var GlobalVar1=0;

    $("#dropdownlist1").change(function getID() {
    <some code>
    GlobalVar1 = selectedValue;
    alert(GlobalVar1);

    $.ajax({
        url: "@Url.Action("myMethod1", "Home")",
        type: 'POST',
        async: false,
        data: { requestedVar : GlobalVar1},
        success: function (data) {
            alert('OK');
            $("html").html(result);
        },  
        error: function (error) {
            alert('error');
        }
    });
});
   </script>
   </head>
   <body>
   <div>
        @Html.DropDownListFor(m => m.SelectedDirectionID, new SelectList(Model.DirectionList.Select(x => new SelectListItem { Value = x.Id.ToString(), Text = x.DirectionName }), "Value", "Text"),"", new { @class = "Duration", required = "required", id="dropdownlist1" })
        @Html.ActionLink("+", "_AddDirection", "Home", null, new { @class = "modal-link btn btn-success"})
        <div>@Html.DisplayName("Choosen description")</div>
        <div>@Html.TextBoxFor(m => m.ReturnedDescription, new { @class = "Duration", disabled = "disabled" })</div>
    </div>
    </body>

控制器：

    [HttpPost]
    public System.Web.Mvc.ActionResult myMethod1(ViewModel m)
    {
        var db = new DB();
        ModelState.Clear();

        var returnedVal = db.GetDesctiption(m.requestedVar).First();
        m.ReturnedDescription = returnedVal.Description;

        var vm = DataFactory.Refresh();
        vm.ReturnedDescription = m.ReturnedDescription;

        return View("AddNewInfo", vm);
    }

更新

现在如何运作： ajax 成功发送带有数据的 POST 请求，我的控制器返回视图，此视图显示在浏览器中，但返回的视图不包含任何 JS 脚本。

问题： 如何使用 JS 脚本和 ReturnedDescription 值完全返回浏览器？

【问题讨论】：

标签： jquery asp.net ajax asp.net-mvc model-view-controller

【解决方案1】：

第一步

更改您的 Action 方法并返回 Json 结果。

    [HttpPost]
    public JsonResult myMethod1(ViewModel m)
    {
        var db = new DB();
        ModelState.Clear();

        var returnedVal = db.GetDesctiption(m.requestedVar).First();
        m.ReturnedDescription = returnedVal.Description;

        var vm = DataFactory.Refresh();
        vm.ReturnedDescription = m.ReturnedDescription;

        return Json(vm,JsonRequestBehavior.AllowGet);
    }

第二步

更改您的 ajax 成功选项。

$.ajax({
        url: "@Url.Action("myMethod1", "Home")",
        type: 'POST',
        async: false,
        data: { requestedVar : GlobalVar1},
        success: function (data) {
           if(data.ReturnedDescription){
              $('#ReturnedDescription').val(data.ReturnedDescription); // This line to be noted.
           }
           // alert("Sending complete");
        },  
        error: function (error) {
            alert('error');
        }
    });

别忘了将代码保存在 $(document).ready 中。

【讨论】：

嗨，阿纳迪。任务是在浏览器中显示带有样式文本和带有 ReturnedDescription 值的 TextBoxFor 的完整视图。
在这种情况下你 $.ajax 将无法工作。您必须使用 Ajax.Beginform。使用“AddNewInfo.cshtml”更新您的问题，以便我可以更新我的答案。

【解决方案2】：

对于使用 MVC 模式通过 Ajax 恢复数据，您应该从控制器返回一个 JSON（例如）类型的数据，以便在通过 ajax 在视图中恢复它之后。

你必须使用：

return Json(vm, JsonRequestBehavior.AllowGet);

代替：

return View("AddNewInfo", vm);

完成的代码是：

[HttpPost]
public JsonResult myMethod1(ViewModel m)
{
    var db = new DB();
    ModelState.Clear();

    var returnedVal = db.GetDesctiption(m.requestedVar).First();
    m.ReturnedDescription = returnedVal.Description;

    var vm = DataFactory.Refresh();
    vm.ReturnedDescription = m.ReturnedDescription;

    return Json(vm,JsonRequestBehavior.AllowGet);
}

请注意您使用此代码的方法。应该是您通过 Ajax 调用请求数据的那个。

另外，我会从 ajax 调用中发送 json 类型的数据：

data: JSON.stringify(dataToSend)

完整的代码将是（如果您以json类型发送数据，您将通过字符串类型恢复它）：

<script>
    var GlobalVar1=0;

    $("#dropdownlist1").change(function getID() {
    <some code>
    GlobalVar1 = selectedValue;
    alert(GlobalVar1);
    $(document).ready(function () {
        $.ajax({
            url: "@Url.Action("myMethod1", "Home")",
            type: 'POST',
            async: false,
            success: function (data) {
                alert("Sending complete");
            },  
            error: function (error) {
                alert('error');
            }
        });
    });
};

【讨论】：