Question

In asp.net mvc3,

I am using a javascript API to dynamically render a user interface. Part of the input section is going to be dependent on how many items the user wants to enter data for. As a result, something like this wont work

@(Html.EditorFor(m => m.P[5].C.Description))

because that cannot be done during runtime. What type of process would I use to call that helper during runtime with AJAX? Would I have a controller action which only returned that information which was called using $.ajax()? Would it be in a different place than a controller action?

Answer 1

At run time you could perform an ajax get to a controller action that will render a view as a string, which in turn could be inserted / appended into the DOM.

Create a new action result that returns JSON as per below:

    return new JsonResult
    {
        JsonRequestBehavior = JsonRequestBehavior.AllowGet,
        Data = new { html = this.RenderPartialViewToString("YourPartialView", model) }
    };

Note, the above makes use of the following controller extension:

    public static string RenderPartialViewToString(this Controller controller, string viewName = null, object model = null)
    {
        if (string.IsNullOrEmpty(viewName))
        {
            viewName = controller.ControllerContext.RouteData.GetRequiredString("action");
        }

        controller.ViewData.Model = model;

        using (var sw = new StringWriter())
        {
            ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
            var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
            viewResult.View.Render(viewContext, sw);
            return sw.GetStringBuilder().ToString();
        }
    }

For further reading regarding this extension method: http://craftycodeblog.com/2010/05/15/asp-net-mvc-render-partial-view-to-string/

All that would remain would be to perform a get passing a parameter signifying the number of items to render and append the returned content into your view. Perhaps something like:

    $.getJSON('url', numberofitems, function (data) {
        $('#somecontainer').html(data.html);
    });