1

我有一个具有以下操作方法的家庭控制器；

[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}]
4

1 回答 1

2

不幸的是，您正在尝试混合两个不会按照您想要的方式混合的部分。您可能想查看 JS 模板。有一些库可以帮助解决这个问题。查看jQuery 模板或UnderscoreJS。这两个库都可以让您获取 JSON 对象并很好地呈现 HTML。

另一种选择是使用KnockoutJS。您也许可以将data-bind标签添加到现有的局部视图。我没试过，所以不知道效果如何。

于 2012-10-30T10:09:01.717 回答