Question

Been picking up MVC4 and Razor and having a ball, but I’ve got a question on the approach for what I want to acheive:

I have a page with some panels on (Like a dashboard), and a set of icons you can drag and drop to these panels to ‘install’ a module into that panel, and display it’s content. This is great from a UI point of view, now I’m looking at hooking this up to something a bit meatier:

What I have:

• IContentModule
• Set of concrete classes for each module with a Render() method
• Controller that handles module drop event and an Activator to get an instance of the class for that module drop

Simple stuff really, ideally, I want it so that each module is responsible for it’s own content, but aside from having a string return from Render, is there a better way, like, assigning a specific view markup to that particular concrete class, so that I can have control over what is being rendered, but in a much more structured way, wondering what the best approach is here?

Thanks for your time!

Danny

Edit: Sorta thinking if there was a way to couple a view to my concrete classes? e.g. ViewForum.cshtml binding to ForumModule.cs, somehow instantiating the view and getting a string from it’s render of the object, then passing that back via a string to insert into my panel?

An example of a panel:

<section class="main box droppable" id="MainPanel">
<div class="padding">
Panel 1
</div>
</section>

The jQuery event

 $(".droppable").droppable({
        hoverClass: 'boxhover',
        drop: function (event, ui) {
            $.ajax({
                type: "POST",
                url: '/Home/AddModule/' + $(ui.draggable).attr("id") + "?returnTo=" + this.id,
                success: function(data) {
                $("#" + data.Target).html(data.Content);
                }
            });
        }
    });

The controller method

        [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult AddModule(string id, string returnTo)
    {

        string content = DemoResolve(id);
        try
        {
            IContentModule module  =  (IContentModule)  Activator.CreateInstance(Type.GetType("Foo.Bar.BLLForumModule,Foo.Bar"));
            content  = module.Render();
        }catch(Exception exp)
        {
            throw;
        }
        return Json(new { Target = returnTo, Content = content });
    }

So where i have that module.Render(), i’m thinking I’d want to get a partial view or something and render that based on the object I have in hand

Answer 1

Worked with a colleague of mine and came up with a solution of binding the views and the modules together in a sort of dynamic way, for example, if the jQuery post comes back with the string of the module ‘BLLForumModule’ we have the following:

    [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult AddModule(string id, string returnTo)
    {

        string content = DemoResolve(id);
        try
        {
            content = RenderView("BLLForumModule");
        }catch(Exception exp)
        {
            throw;
        }
        return Json(new { Target = returnTo, Content = content });
    }

private string RenderView(string moduleName)
    {
        string result = "";

        IContentModule module = (IContentModule)Activator.CreateInstance(Type.GetType("Foo.Bar." + moduleName  +",Foo.Bar"));

        this.ViewData.Model = module;

        using (var sw = new System.IO.StringWriter())
        {

            ViewEngineResult viewResult = ViewEngines.Engines

            .FindPartialView(this.ControllerContext, moduleName);

            var viewContext = new ViewContext(this.ControllerContext,

            viewResult.View, this.ViewData, this.TempData, sw);

            viewResult.View.Render(viewContext, sw);

            result = sw.GetStringBuilder().ToString();

        }
        return result;
    }

This assumes there is a class in the Foo.Bar assembly with the same name as the view we are trying to load (BLLForumModule.cshtml and Foo.Bar.BLLForumModule.cs)

I then take the rendered content from the view and spit it back as a JsonResult as the Content part and the Target part of the JsonResult as the ID of the panel it needs to be dropped into.

This feels pretty good I think, any suggestions or improvements welcome!