ASP.NET index page with search posting into partial view - asp.net

Question

I have an Index page with a search box (straight from this tutorial: http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application) to which I've added a Create form in the footer, which I display as a partial view.
Although the Create form works well and adds new records, the search form seems to post back the Create Form instead, causing a validation error, and redisplaying the whole layout.cshtml page within the location of my partial view.
Edit - the search form posts itself and returns the correct result and then seems to post my partial view as well. My debugger shows the controllers ActionResult Create HTTP post function being called
How do I get the Search form to stop also posting into my partial view?
My index.cshml:
#using (Html.BeginForm("Index"))
{
<p>
#Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { #class = "search-query", placeholder = "Search by name" })
<input type="submit" value="Search" class="btn" />
</p>
}
#Html.Action("Create");
My Create.cshtml:
#using (Html.BeginForm("Create"))
{
#Html.TextBoxFor(model => model.Title, new { #style = "width:250px" })
#Html.TextBoxFor(model => model.AnnouncementText, new { #style = "width:250px" })
<input type="submit" value="Create" class="btn btn-small" />
#Html.ValidationMessageFor(model => model.Title)
#Html.ValidationMessageFor(model => model.AnnouncementDate)
}
My controller:
public ViewResult Index(string searchString, int? page)
{
var Announcements = from a in db.Announcements
select a;
if (!String.IsNullOrEmpty(searchString))
{
ViewBag.Search = true;
Announcements = Announcements.Where(s => (s.Title.ToUpper().Contains(searchString.ToUpper()) || s.AnnouncementText.ToUpper().Contains(searchString.ToUpper())));
}
Announcements = Announcements.OrderBy(s => s.Title);
int pageSize = 10;
int pageNumber = (page ?? 1);
return View(Announcements.ToPagedList(pageNumber, pageSize));
}
public ActionResult Create()
{
Announcement announcement = new Announcement();
return PartialView(announcement);
}
//
// POST: /Announcement/Create
[HttpPost]
public ActionResult Create(Announcement announcement)
{
if (ModelState.IsValid)
{
db.Announcements.Add(announcement);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(announcement);
}

Answer 1

One possible solution is to use ajax to post a partial back to the view without a full page reload. If you use Ajax.BeginForm{} then your controller can return your partial as html as a model property and then you just load the content on the Ajax.BeginForm's successFunction. I use the method below in a base controller class as I often return partial content in views.
Model...
public class BaseEditModel
{
public string PostAction{get;set;}
public string PostController{get;set;}
public string PartialViewContent{get;set;}
}
Controller...
public ActionResult(int someID)
{
BaseEditModel model=new BaseEditModel();
model.PostController="SaveController";
model.PostAction="SaveEntity";
model.PartialViewContent=this.RenderPartialViewToString("Partials/Entity/EntityEdit", model);
}
protected string RenderPartialViewToString(string viewName, object model)
{
if (string.IsNullOrEmpty(viewName))
viewName = ControllerContext.RouteData.GetRequiredString("action");
ViewData.Model = model;
using (StringWriter sw = new StringWriter())
{
ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
viewResult.View.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}
View...
#using(Ajax.BeginForm(
Model.PostAction,
Model.PostController,
null,
new AjaxOptions { OnSuccess = "editPostSuccess", OnFailure = "editPostFailure" },
new { id = "editBase_frmEdit", name = "editBase_frmEdit" }))
{
}
<script type="text/javascript">
function editPostSuccess(ajaxContext) {
if (ajaxContext.PartialViewContent != null)
$('#partialDiv').html(ajaxContext.PartialViewContent);
}

Answer 2

I still don't entirely understand what caused the problem, but I fixed it by renaming the Create Post method to CreatePost. When the GET and POST methods both had the same name, for some reason the POST was being called.
My create.cshtml
#using (Html.BeginForm("CreatePost"))
Thanks all for your help