Display Partial View with Json Result Data In Asp.Net MVC3

Question

i have a homecontroller with the following action method;

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

my view is called "ProjectAdd.CSHTML" with following content;

    <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>

my javascript OnSucess function looks like;

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

SO, my question is how do i get the json result data and populate it in partial view? following is my result json data;

[{"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}]

Is there a reason you don't return the rendered partial from the action? Do you have to return a JSON object? — Jarrett Meyer
– Jarrett Meyer, Commented Oct 30, 2012 at 10:12
i have tried similar aproach using ajax and it works with that. but now i m learning json. So,i have returned the json object (see the last portion of my question). Now, i need to wrap it in html tags — Idrees Khan
– Idrees Khan, Commented Oct 30, 2012 at 10:15

Jarrett Meyer · Accepted Answer · 2012-10-30 10:09:01Z

2

Unfortunately, you're trying to mix two pieces that won't mix the way you want. You probably want to look into a JS template. There are a few libraries that can help with this. Check out jQuery templates or UnderscoreJS. Both of these libraries will let you take a JSON object and nicely render HTML.

Another option is to use KnockoutJS. You might be able to add data-bind tags to your existing Partial view. I haven't tried it, so I don't know how that will work out.

answered Oct 30, 2012 at 10:09

Jarrett Meyer

19.6k6 gold badges61 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display Partial View with Json Result Data In Asp.Net MVC3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related