I have a route defined as:
routes.MapRoute("AllUsers",
"Users/Search/{Search}", new {
Controller = "Users", action=
"Index"});
and the form as:
<% using (Html.BeginForm("Index", "Users/Search/", new { RouteValue = "AllUsers" }, FormMethod.Get, new { id = "searchForm" })){%>
<input id="searchBox" name="search" type="text" />
<input type="submit" id="submit" value="Search" /><%} %>
Currently as expected this creates a url of
../Users/Search/?search=searchTerm
but what I would like is:
../Users/Search/searchTerm
How is this possible? I thought of using javascript, but this seems a little dirty. Is there a more streamlined way of accomplishing this?
You cannot do that with an HTML form. Though you can mimic the behavior with JavaScript.
How about a server-side redirect?
You could do:
<input type="submit" id="submit" value="Search"
onclick="$('form').attr('action', $('form').attr('action') + $('#searchBox').val());" />
Which seems a little ugly. You could also not use a form and have this:
<input type="button" id="submit" value="Search"
onclick="window.location.href = 'search/' + $('#searchBox').val();" />
Outside of this, you could allow the original submit to go to the weird url, but use RedirectToAction in your controller.
Using jQuery you could something like this:
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
document.location.href = $("form").attr("action") + $("#searchBox").val();
return false;
});
});
</script>
Try to change like this:
routes.MapRoute("AllUsers",
"Users/Search/{id}", new { Controller = "Users", action= "Index"});
and the form as:
<% using (Html.BeginForm("Index", "Users/Search/",
new { RouteValue = "AllUsers" }, FormMethod.Get, new { id = "searchForm" })){%>
<input id="searchBox" name="id" type="text" />
<input type="submit" id="submit" value="Search" /><%} %>
Not tested, but "id" is default route value which are not creating "?name=value".
Related
here was my code from view
#{ var companies = (IEnumerable<Company>)ViewData["companylist"]; }
#foreach (var item in companies)
{
//post the form to upload actions, index2 for testing
<form id="submitfinal" method="post" asp-action="Upload" asp-controller="report" enctype="multipart/form-data">
<input type="hidden" name="companyid" value="#item.Id" />
#item.Name (#item.Status)
<input type="file" name="files" />
<input name="submit" type="submit" value="upload final report" />
</form>
}
Question here was how can i take the data from input tag attribute to controller?
let say the #item.Id is 1234, how i get that in controller?
you can use
#Html.HiddenFor(m => m.yourPropertyname)
or using jquery ajax you can send the value to controller.
Maybe it's too late, but I would use asp-route-Id like:
<form id="submitfinal" method="post" asp-route-Id="#item.Id" asp-action="Upload" asp-controller="report" enctype="multipart/form-data">
I have a page that displays a list of people. It can be sorted on first and last name. To search for people, I have the following Razor form:
#using (Html.BeginForm("Index", "Persons", new { sort = ViewBag.Sort }, FormMethod.Get))
{
<p>
Search: #Html.TextBox("search", ViewBag.Search as string)
<input type="submit" value="Search" />
</p>
}
ViewBag.Search and ViewBag.Sort contains the last used search and sort routeValues. When I sort the list of people on first name, the form gets rendered in HTML like this:
<form action="/persons?sort=firstname" method="get">
<p>
Search: <input id="search" name="search" type="text" value="" />
<input type="submit" value="Search" />
</p>
</form>
As intended, ?sort=firstname is included in the action. However, when I press the submit button (Search), the sort parameter is lost. The new url only has ?search=.... How can I fix this?
When you look at the output html you would get something like this :
<form action="/persons/index?sort=asc" method="get">
<p>
<input type="text" name="search" />
<input type="submit" value="Search" />
</p>
</form>
This seems completely legit, you would expect a behaviour like appending the query of post inputs. However this is limited by HTTP specification. The query string of a form post action wont be appended. That is why your query parameters wont work at your server side. However i what would expect from the Asp.net to get the parameters for the form to the hidden fields automatically which it doesnt right now.
As a proper solution you have to put the input , in the form , so you can use hidden field to do this like :
#using (Html.BeginForm("Index", "Persons", FormMethod.Get))
{
#Html.Hidden("sort",ViewBag.Sort)
<p>
Search: #Html.TextBox("search", ViewBag.Search as string)
<input type="submit" value="Search" />
</p>
}
You need to store the value of sort somewhere in the form, in order for it to be included as part of the submit. You could try a hidden input:
#using (Html.BeginForm("Index", "Persons"))
{
<input type="hidden" id="sort" value="firstname" />
<p>
Search: #Html.TextBox("search", ViewBag.Search as string)
<input type="submit" value="Search" />
</p>
}
You may need to tweak how the value of sort is retrieved from, I put firstname as an example, but when you submit the form, sort will be included in the payload e.g.
[HttpPost]
public ActionResult Index(string sort, string search)
{
}
The issue i am facing has taken more then 8 hours but couldn't find the solution to it.
I am trying to implement ajax functionality in MVC4.
I've following code in index view.
#using (Ajax.BeginForm(
new AjaxOptions
{
HttpMethod = "get",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "resturantList"
}
))
{
<input type="search" name="searchTerm" />
<input type="submit" value="Search By Name" />
}
<div id="resturantList">
#foreach (var item in Model)
{
<div>
<h4>#item.Name</h4>
<div>#item.City, #item.Country</div>
<div>Reviews: #item.CountOfReviews</div>
<hr />
</div>
}
</div>
Following is html which renders when search button is clicked.
I've checked the script files references by firebug even they are included
<script src="/Scripts/jquery-2.1.0.js">
<script src="/Scripts/jquery-ui-1.10.4.js">
<script src="/Scripts/jquery.unobtrusive-ajax.js">
<script src="/Scripts/jquery.validate.js">
<script src="/Scripts/jquery.validate.unobtrusive.js">
Tried to remove the
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
from web.config file which solves the above stated issue but it also disables the client side validations.
You are not telling the form to post the data on which action of which controller, this is causing the problem,do like this, pass controller and action name as well:
#using (Ajax.BeginForm(
"Action", "Controller",
new AjaxOptions
{
HttpMethod = "get",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "resturantList"
}
))
{
<input type="search" name="searchTerm" />
<input type="submit" value="Search By Name" />
}
<div id="resturantList">
#foreach (var item in Model)
{
<div>
<h4>#item.Name</h4>
<div>#item.City, #item.Country</div>
<div>Reviews: #item.CountOfReviews</div>
<hr />
</div>
}
</div>
and second thing,make sure you are returning a partial view,if full view is returing that will also cause issues.Do this in you view for it:
#{
Layout = null
}
Actually you have to return partial view in the response of ajax call
Here is a simplified example. My first form :
#using (Html.BeginForm("Action1", "MyController", FormMethod.Post))
{
<input id="cb" type="checkbox" value="true" name="MyCheckBox" />
<label for="cb">Check this out</label>
}
And late in the same view, another form :
#using (Html.BeginForm("Action2", "MyController", FormMethod.Post))
{
<input type="submit" value="Submit" id="submit" />
}
How to efficiently get the value (checked or not) of this checkbox, in the action Action2 in MyController ?
Browser don't send values from another form in requests.
The only way to do it is to handle onsubmit event with js/jquery, add value to form and submit it with js.
I need to design a page to register as well as login a user.By clicking login button login servlet should be called.And on clicking register button,register servlet will be called.how can i do this?
Having two forms that post to different places is the simplest method
Name your buttons:
<input type="submit" name="form_action" value="Login" />
and
<input type="submit" name="form_action" value="Register" />
When it comes to processing the form, just hookout form_action and it should equal Login or Register.
This requires some more server-side logic but should work if you need your two forms to be tightly combined.
You can include some Javascript code for this.
<form name="Form1" method="post">
Your Name <input type="text" name="text1" size="10" /><br />
<INPUT type="button" value="ButtonLogin" name=button1 onclick="return OnButtonLogin();">
<INPUT type="button" value="ButtonRegister" name=button2 onclick="return OnButtonRegister();">
</form>
like this:
<script language="Javascript">
<!--
function OnButtonLogin()
{
document.Form1.action = "Login.do"
document.Form1.target = "_blank";
document.Form1.submit();
return true;
}
function OnButtonRegister()
{
document.Form1.action = "Register.do"
document.Form1.target = "_blank";
document.Form1.submit();
return true;
}
-->
</script>