Entire MVC view loads on postback, instead of just partial view

Question

I am trying to build a dashboard using MVC4. I have populated my Dashboard view with the dashboard widgets rendered as partial views using Render.Action().

<div class="row-fluid">
<div class="dashboard">
    <div class="dashboard2Col">
        <div class="dashboardCol">
            @for (int c1 = 0; c1 < Model.Count; c1 = c1 + 2)
            {
                Html.RenderAction("DashboardItem_" + Model[c1].DashboardCode, "MyDashboard", 
                    new { dashboardTitle = Model[c1].DashboardTitle });
            }
        </div>
        <div class="dashboardCol">
            @for (int c2 = 1; c2 < Model.Count; c2 = c2 + 2)
            {
                Html.RenderAction("DashboardItem_" + Model[c2].DashboardCode, "MyDashboard", 
                    new { dashboardTitle = Model[c2].DashboardTitle });
            }
        </div>
    </div>
</div>

Each dashboard widget is a partial view that has a controller action method associated with it, with [ChildActionOnly] attribute.

 [ChildActionOnly]
    public ActionResult DashboardItem_AllEvents(string dashboardTitle)
    {
        DI_AllEvents_VM model = new DI_AllEvents_VM();
        model.DashboardTitle = dashboardTitle;
        model.Events = GetAllEvents().Where(x => x.IsUpdated == false).ToList();
        return View(model);
    }

    [HttpPost]
    public ActionResult DashboardItem_AllEvents(DI_AllEvents_VM model, FormCollection form)
    {
        foreach(var e in model.Events)
       {
            if(e.IsChecked)
            {
                var i = model.Events.Where(x => x.EventId == e.EventId).FirstOrDefault();
                i.IsUpdated = true;
            }
       }

        Session["Events"] = model.Events;
        var updatedEvents = GetAllEvents().Where(x => x.IsUpdated == false).ToList();
        model.Events = updatedEvents;
        return PartialView("DashboardItem_AllEvents", model);
    }

The dashboard widget works fine for creating read-only widgets. But I need to create a dashboard widget that has a search capability, so it needs to post back. I tried embedding the partial view inside a form with submit button. But when I click on the submit button, the entire Dashboard Index page reloads instead of just the dashboard widget.

Any suggestions?

I think you're confusing the MVC framework with how WebForms works. There is no "postback" in the traditional ASP.NET sense. That being said, have you looked into the Ajax helpers? For instance: http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor — Tieson T., Jun 14 '15 at 20:15
Your entire setup sounds like you should maybe use SPA instead of MVC. — H H, Jun 14 '15 at 21:09
Does your form look like `@using (Html.BeginForm(` ? Try changing it to `@using (Ajax.BeginForm(` (parameters will also need to be changed. — freedomn-m, Jun 15 '15 at 09:48
"a search capability, so it needs to post" This is not correct. Search does not imply post. You can remove the `form` then use `ajax` to get the content directly using a GET (not POST) and returning a `PartialView`. — freedomn-m, Jun 15 '15 at 09:55
@freedomn-m : Thank you for your suggestion. I removed the form. I tried firing ajax GET request on click of "Search" button and returning a partial view. It works as expected for the first button click firing a GET request. However, it does not work for the subsequent button clicks. Nothing happens when I click the button on second, third time. Please suggest. — jen, Jun 15 '15 at 15:23
If the button is inside the form that you're recreating, you'll also need to re-add the event handler. Or don't overwrite your button with the result :) — freedomn-m, Jun 15 '15 at 15:35
@freedomn-m : Silly me! It works like a charm now! Thanks a lot! — jen, Jun 15 '15 at 15:48
@TiesonT. : I recently moved to MVC from WebForms. So, I guess the old terminology still stuck with me. The link you posted was helpful. Thank you. — jen, Jun 15 '15 at 15:53

score 0 · Answer 1 · answered Jun 14 '15 at 20:14

0

Research the topic "AJAX". Basically, you most likely want to write javascript that captures the submit event of that form, and sends it using an XMLHttpRequest() to the server, and the server should reply with the data or HTML fragmet for that widget only.

answered Jun 14 '15 at 20:14

Oskar Berggren

5,583
1
19
36

I fixed my issue. The approach to the solution was the same thing as you suggested. Thank you! – jen Jun 15 '15 at 15:52

Entire MVC view loads on postback, instead of just partial view

1 Answers1