Dave Wade Dave Wade - 22 days ago 6
ASP.NET (C#) Question

ASP.NET MVC BeginForm not able to post with parameter

I have a form with a searchbox on it. When someone types something into the search box and hits the search button I am trying ot do a post to capture the search filter and then fire off a view.

Here is the controller code

public class SpotsController : Controller
{
[HttpPost]
[AllowAnonymous]
public ActionResult SearchSpots(string searchfilter)
{
//your code here....
return Index(searchfilter);
}


Here is the code from my view up until the part that is tryign to do the submit

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Haunt Spotter</title>
</head>
<form id="__AjaxAntiForgeryForm" action="#" method="post"><@Html.AntiForgeryToken()></form>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
@using (Html.BeginForm("SearchSpots", "Spots"))
{
<input id="searchfilter" type="text" class="form-control" autocomplete="off" placeholder="Search" name="searchfilter">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
}
</div>
</div>
</div>


If I take the parameter off of the controller function it works fine. If not it seems to crash and try to re display a get which fails because I only have a post function for this. I am guessing I have something screwed up with the parameter but I can't figure out what it is. Any help woudl be greatly appreciated.

UPDATE

Based on feedback I have changed my post to a get

[HttpGet]
[AllowAnonymous]
public ActionResult SearchSpots(string searchfilter)
{
//your code here....
return Index(searchfilter);
}


and my view code to this

@using (Html.BeginForm("SearchSpots", "Spots", FormMethod.Get, null))
{
<input id="searchfilter" type="text" class="form-control" autocomplete="off" placeholder="Search" name="searchfilter">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
}


Unfortunately I still have the original issue. If I remove the searchfileter parameter from my controller call then it goes into the call with no problems but when I am expecting the modelbinder to give me a searchfilter it crashes out.

Here is the call I am redirecting to in my search function

private ApplicationDbContext db = new ApplicationDbContext();

// GET: Spots
public ActionResult Index(string filter = "")
{
ViewBag.initialFilter = filter;
if (User.IsInRole("SiteAdmin"))
{
return View(db.Spots.ToList());
}
else
{
return View(db.Spots.Where(x => x.Approved).ToList());
}

}


and the view that is displayed

@model IEnumerable<HauntSpots.Models.Spot>

@{
ViewBag.Title = "Index";
}

<h2 class="align-right">Haunt Spots</h2>

@if (Context.User.IsInRole("SiteAdmin"))
{
<p style="padding-top:20px">

<a href="@Url.Action("Create")" title="Add New Spot" class="btn btn-primary"><i class="icon-plus-sign"></i> Add New</a>
</p>
}

<table id="dt-spots" class="table table-striped">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
@if (Context.User.IsInRole("SiteAdmin"))
{
<th></th>
}
</tr>
</thead>
<tbody>

@foreach (var item in Model)
{

<tr>
<td>
@if (Context.User.IsInRole("SiteAdmin"))
{
@Html.Hidden(Url.Action("Edit", "Spots", new { id = item.Id }))
<a style="color: Red; vertical-align: middle; font-size: 2em" href="@Url.Action("Delete", "Spots", new { id = item.Id })" title="Delete Spot" class="btn"><i class="icon-remove-sign"></i></a>
}
else
{
@Html.Hidden(Url.Action("Details", "Spots", new { id = item.Id }))
}
</td>
<td>

@if (item.Image == null)
{
<img width="100" height="100"
src="~/Content/Images/NoPhoto.jpg" class="img-rounded" />
}
else
{
<img width="100" height="100"
src="@item.Image" class="img-rounded"/>
}
</td>
<td >
<div class="form-group pull-left col-md-2">
<h4>@item.Title </h4>
<h5 style="clear: left">
@if (item.Address != null)
{
<span>@item.Address</span>
<br/>
}

@if (item.State == null)
{
<span>@item.City</span><br/>
<span>@item.Country</span>
}
else
{
if (item.State == "")
{
<span>@item.City</span>
<br/>
<span>@item.Country</span>
}
else
{
<span>@item.City, @item.State</span>
<br/>
<span>@item.Country</span>
}
}
</h5>
</div>
<div class="form-group pull-left col-md-8">
<h6>@item.Summary</h6>
</div>
</td>
@if (Context.User.IsInRole("SiteAdmin"))
{
<td>
@if (@item.Approved)
{
<span style="color: green">Approved</span>
}
else
{
<span style="color: red">Not Approved</span>
}
</td>
}
</tr>
}
</tbody>
</table>

<script type="text/javascript">
$(document).ready(function () {
//Initalize and configure DataTables
$('#dt-spots').dataTable({
"oSearch": { "sSearch": "@ViewBag.initialFilter" }
});


$("tbody").on("click", "tr", function () {
window.location = $(this).find('input').attr('name');
});
});
</script>

Answer

In agreement with most of the other answers stating that this needs to be an HttpGet request rather than an HttpPost request I believe that this can be solved by changing your HTML.

HTML:

@using (Html.BeginForm("SearchSpots", "Spots", FormMethod.Get, null))
{
    <input id="searchfilter" type="text" class="form-control" autocomplete="off" placeholder="Search" name="searchfilter">
    <input class="btn btn-default" type="submit" <i class="glyphicon glyphicon-search"</i>/>       // part that needs changing
}

Controller:

[HttpGet]
public ActionResult SearchSpots(string searchfilter)
{
    // logic       
}

I believe your issue can be related to this. <button> is exactly what it is.. a button.. it basically does nothing, and is mainly used for JS purposes. However, the <input type="submit" /> actually submits the surrounding form.

I hope this helps!

UPDATE

I did need the input to pass the parameter. I still had the same error even after it was being passed and I had to make this final tweak to get it running

[HttpGet]
    [AllowAnonymous]
    public ActionResult SearchSpots(string searchfilter)
    {
        return RedirectToAction("Index", new { searchfilter = searchfilter}); 
    }

I needed to redirect instead of trying to return a view