Question

我有一个带有以下操作方法的homecontroller;

[HttpPost]
[Authorize(Roles = "Admin")]
public JsonResult ProjectAdd(PortfolioViewModel model, int[] categories)
{
    using (PortfolioManager pm = new PortfolioManager())
    {
        using (CategoryManager cm = new CategoryManager())
        {
            if (ModelState.IsValid)
            {
                bool status = pm.AddNewProject(model, categories);
                if (status)
                {
                    // ViewBag.Message = "Inserted Sucessfully :)";
                }
            }
        }
        return Json(pm.GetAllProjects());
    }
}

我的观点名为“ProjectAdd.CSHTML”，内容如下：

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <thead>
           // the heading goes here
        </thead>
        <tbody id="projectsUpdate">
            @Html.Partial("_ProjectsPartial", ViewBag.ProjectsList as IEnumerable<MVC3Resume.Models.PortfolioViewModel>)
        </tbody>
    </table>
<p>

    @using (Ajax.BeginForm("projectAdd", "home", new AjaxOptions { 
        LoadingElementId = "loading", 
        LoadingElementDuration = 2000, 
        Url = Url.Action("projectAdd", "home"), 
        OnSuccess="OnSucess",
    }, 
        new { enctype = "multipart/form-data" }))
    {    
        @Html.ValidationSummary(true)
        <div id="SucessMessage"></div>
        <fieldset>
            <legend>Add New Project</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.ProjectHeading)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ProjectHeading)
                @Html.ValidationMessageFor(model => model.ProjectHeading)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Image)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.Image, new { type = "file" })
                @Html.ValidationMessageFor(model => model.Image)
            </div>
            <div class="editor-label">
                <label for="categories">Categories</label>
            </div>

            <div class="editor-label">
                @foreach (var item in ViewBag.Categories as IEnumerable<MVC3Resume.Models.CategoryViewModel>)
                {
                    <input type="checkbox" name="categories" value="@item.CategoryId" />
                    @item.CategoryName
                }

            </div>
            <p>
                <input type="submit" value="Create" class="submit" />
            </p>
        </fieldset>
    }
</p>

我的javascript OnSucess函数看起来像;

<script type="text/javascript">
    function OnSucess(resultData) {
        // all logic goes here
    }
</script>

所以，我的问题是如何获取json结果数据并在局部视图中填充它？ 以下是我的结果json数据;

[{"ProjectId":1,"ProjectHeading":"heading","ProjecctUrl":"url","ProjectLongDescription":"descripitn","ProjectShortDescription":"...","PromoFront":false,"Thumbnail":null,"ProjectThubmnail":"folio_140_1.jpg","Image":null,"ProjectImage":"folio_preview640.jpg","CategoryId":2},{"ProjectId":2,"ProjectHeading":"heading 2","ProjecctUrl":"url2","ProjectLongDescription":"description 2","ProjectShortDescription":"...","PromoFront":false,"Thumbnail":null,"ProjectThubmnail":"folio_140_2.jpg","Image":null,"ProjectImage":"folio_preview640.jpg","CategoryId":1},{"ProjectId":3,"ProjectHeading":"teasting heading","ProjecctUrl":"test url","ProjectLongDescription":"description","ProjectShortDescription":"...","PromoFront":false,"Thumbnail":null,"ProjectThubmnail":"folio_preview640.jpg","Image":null,"ProjectImage":"folio_preview640.jpg","CategoryId":1}]

Answer 1

不幸的是，你试图混合两件不会混合你想要的东西。您可能想要查看JS模板。有一些库可以帮助解决这个问题。查看jQuery templates或UnderscoreJS。这两个库都可以让你获取一个JSON对象并很好地呈现HTML。

另一种选择是使用KnockoutJS。您可以将data-bind标记添加到现有的部分视图中。我没有尝试过，所以我不知道这会怎么样。

在Asp.Net MVC3中显示带有Json结果数据的部分视图

1 个答案: