映射json从控制器返回到强类型视图

时间:2013-09-11 04:15:04

标签: asp.net asp.net-mvc jquery

这是我的强类型视图

@using ( Html.BeginForm("Index", "Home",null, FormMethod.Post, new { id="FormPost" }))
{ 
    @Html.TextBoxFor(x => x.Name)  @Html.ValidationMessageFor(x => x.Name) 
        <br />
    @Html.TextBoxFor(x => x.LastName) @Html.ValidationMessageFor(x => x.LastName) 
        <br />
    @Html.TextBoxFor(x => x.Age)  @Html.ValidationMessageFor(x => x.Age) 
        <br />

    <input type=submit   value="submit" />
    <br /><br />    
 }

这是视图模型类:

public class MyViewModel
{
    [Required(ErrorMessage="Please enter first name") ]
    public string Name { get; set; }
    [Required]
    public string LastName { get; set; }
    [Required]
    public int Age { get; set; }
}

我使用下面的脚本将表单发布回Index操作方法

ReusableJqueryPost.prototype.CommonPost = function (formId) {

        var fid = $("#" + formId);
        var validated = $(fid).valid();
        if (validated) {
            $.ajax({
                type: 'POST',
                url: $(fid).attr('action'),
                data: $(fid).serialize(),
                accept: 'application/json',
                error: function (xhr, status, error) {

                    alert('error: ' + xhr.responseText + '-' + error);
                },
                success: function (response) {
                    alert('DATA SAVED!');
                    var resp = response;    
                }
            });
        }
};

Index Action方法现在可以作为 ActionResult

返回
return View(objMyViewModel);

或作为或 JsonResult

return Json(objMyViewModel);

如果我 使用jquery帖子并将数据作为 ActionResult 返回,那么我不需要在客户端做任何事情。 Asp.net MVC将根据@Html.TextBoxFor(....)

将值绑定到相应的文本框

由于我使用jquery帖子发布到action方法并将数据作为 JsonResult 返回,因此我希望将json字符串中的每个元素自动绑定到相应的{{1文本框而不是必须使用jquery来查找文本框或选择框(如果有的话),然后根据json字符串中接收的值将数据绑定到它。

问题

  1. 这是否可以在asp.net mvc的某些功能下开箱即用?
  2. 是唯一可用的选项,使用jquery按名称/ id查找文本框或下拉列表或任何其他输入元素,然后从json字符串中分配值
  3. 有没有什么方法可以一次编写这个作业,这样我就可以重复使用相同的代码而不必在整个项目中为每个视图重复一遍?就像我在这里有一个jquery post方法用于整个项目一样。
  4. 由于

2 个答案:

答案 0 :(得分:1)

您可以按照以下步骤实现您的期望

  1. 对您的操作进行ajax调用
  2. 然后从操作返回部分视图为字符串
  3. 然后使用jquery用结果替换容器
  4. 例如:

    Jquery POST:

    $.ajax({
        type: "POST",
        url: "Controller/Action", // URL
        data: {}, // Your data
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            $("#result").replaceWith(result); // "#result" is your container which you want to replace for eg: div
        },
        error: function () {
        }
    });
    

    动作:

        [HttpPost]
        public JsonResult Insert(TypeName model)
        {
            return Json((RenderRazorViewToString("PartialViewName", UpdatedModel)), 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();
            }
        }
    

答案 1 :(得分:0)

查看@Ajax.BeginForm - 我认为它符合您的要求。