Question

I’m new to MVC 4 and the Razor engine – so this might be a dumb question.

What I’m trying to achieve is I have a page with a drop down list and a button. Clicking the button calls the controller passing the value selected. The controller should return a partial view and only the bottom part of the page should be updated.

However I’m finding that the entire page gets replaced with just the partial view html. Ie. I get my list of results displaying but I lose my dropdownlist of projects and submit button. I tried including a reference to jquery and unobtrusive scripts (which I don’t think I need to in MVC 4) but that doesn’t change the page at all (ie. the dropdownlist and button stay there and no results are displayed).

Part of my View:

@using (Ajax.BeginForm("GetProjectStories", "MyController", new AjaxOptions{ UpdateTargetId = "projectUserStories"}))
{

    <fieldset>
        <legend>Select Project</legend>
        <div>
            @Html.DropDownList("ProjectReference", (IEnumerable<SelectListItem>)Model.ProjectList)
        </div>
        <p>
        <input name="GetStoriesButton" type="submit" value="Get Stories" />
        </p>
    </fieldset>
}

@if (Model != null && Model.UserStories != null)
{
    <div id="projectUserStories">
        @{Html.RenderPartial("_UserStoryList", Model);}
    </div>

}

My controller:

public ActionResult GetProjectStories(ProjectViewModel model)
        {

           var stories =  MyService.GetProjectUserStories(model.ProjectReference).Results;   
           model.UserStories = stories;
            return PartialView("_UserStoryList", model);
        }

My partial view content just contains an html table and reference to the model.

Answer 1

So I tried including that unobtrusive script, and fixing the fact I wasn’t rendering that div if that object was null but it still wasn’t working.

So I switched to using jquery.

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

    <script type="text/javascript">
            $(function () {
                $('form').submit(function () {
                    var url = "@Url.Action("GetProjectStories", "MyController")";
                    var data = { selectedProject: $('#ProjectReference').val() };

                    $("#projectUserStories").load(url, data, function() {
                    });
                    return false;
                });
            });

     </script>

        @using (Html.BeginForm())
        {
            <fieldset>
                <legend>Select Project</legend>
                <div>
                    @Html.DropDownList("ProjectReference", (IEnumerable<SelectListItem>) Model.ProjectList)
                </div>
                <p>
                    <input name="GetStoriesButton" type="submit" value="Get Stories" />
                </p>
            </fieldset>

            <div id="projectUserStories">
                @{ Html.RenderPartial("_UserStoryList", Model); }
            </div>
         }