Form reloads the page but does not submit - asp.net-mvc

I'm working on Asp.net MVC Application. When I use a form and try to submit , it just reloads the page. I have included the method and Action info , but the form and data are not sent to address specified in action attribute of form. Any help please
<form action="/Search/SearchforQuery/" method="post" runat="server">
<p>Search : <input style="font-size:medium; width: 600px; height: 29px;"
name="searchField" id="searchField" /></p>
</div> <input type="submit" value="Submit Form" />
</form>

Why are you using runat="server" if you are using MVC?
Delete it.
Try to use:
#{ using (Html.BeginForm(...))
{
<p>
Content here
</p>
}

Related

POST and GET in the same form created by BeginForm method

How to create a form that has a search function (pull data from the database) AND a submit function (add data to the database) at the same time using the BeginForm() method? I am reviewing the overloads on MSDN and I don't seem to find one.
Code:
#using (Html.BeginForm()){
<table>
#*Bunch of textboxes and dropdown lists*#
</table>
<div id=" buttonHolder">
<input id="Search" type="button" value="Search" />
<input id="Reset1" type="reset" value="Reset" />
<input id="Submit1" type="submit" value="Add" />
</div>
}
You can use two approaches here:
handle onsubmit and fetch/save data with AJAX (you can do it even with Html.BeginForm but it's easier to go just with regular <form ...)
#using (Html.BeginForm("DoIt", "DoItAction", FormMethod.Post, new { onsubmit = "submitWithAjax(event); return false;" }))
create two separate forms with a different action/controller pair

unable to display the validation messages from #Html.ValidationSummary() in MVC view

I have a fairly simple form created in a partial view and loading the form on a jquery dialog. The view is tightly bound to a model. When the user clicks on the submit button with out entering any inputs, I need to show the validation messages.
<div>
<form method="post" enctype="multipart/form-data" id="ssimForm" action="Home/ProcessUploadedFile"
onsubmit="return false;">
<div>
<h3>
Select the file to be uploaded :</h3>
<span>
<input type="file" name="UploadFileName" id="UploadFileName" /></span>
</div>
<div>
<h3>
Select the date range :</h3>
<span class="uslabel">From Date(MM/dd/yyyy): </span>
<input class="usdate" id="usfromdate" name="StartDate" type="date" />
<span class="uslabel">To Date(MM/dd/yyyy): </span>
<input class="usdate" id="ustodate" name="EndDate" type="date" />
</div>
<div>
<br />
<input type="submit" id="submitButton" name="submitButton" value="Process File" />
</div>
#Html.ValidationSummary()
<div class="message-success">
<span>#ViewBag.Confirmation</span>
</div>
<div class="message-error">
<span>#ViewBag.Error</span>
</div>
</form>
</div>
Now comes the actual problem. when I submit the form I am able to see the validationSummary object populated with the messages, but they are not getting rendered on the screen.
I am able to see the messages if I replace the content of the dialog with the response from the jquery ajax call, that fetches the entire view from the server side. I do not want to take this approach as I beleive this is not the correct way to return validation summary in MVC.
Am I missing something? Any help is appreciated.
I don't know why you don't have the #using (Html.BeginForm()) { } block.
Here is my blog post for a quick and easy way to set up Validation Summary + Unobtrusive Validation for MVC3+.
http://geekswithblogs.net/stun/archive/2011/01/28/aspnet-mvc-3-client-side-validation-summary-with-jquery-validation-unobtrusive-javascript.aspx

Create a search page in ActiveAdmin

I'm using ActiveAdmin to deploy my project. And I had some problem when I was developing.
I had some database table, e.g: "Worker", "Product", "Task". I wanted to create a page to search on those table with many situation.
I created a simple page:
ActiveAdmin.register_page "my page" do
content do
panel "Search details" do
panel "By Name" do
render :partial => "form"
end
end
end
end
And this is _form.html.erb
<form action="" method="post">
<input type="text" value="" name="taskid">Task ID</input>
<input type="text" value="" name="productid">Product ID</input>
<input type="text" value="" name="workerid">Worker ID</input>
<input type="submit" value="Submit"/>
</form>
But I don't know how can I call a controller from a form? (which controller was defined)
And How can I render or show the result to the content area of "my_page" in Activeadmin from a controller?
Anyone may help me? plz!
Design the form such that it uses the existing active admin filters and displays the results accordingly. You may want to look at the HTML of your filter forms (using firebug), in order to get the required params, and the submit action. Here is the partial which I use to search my User model (constructed from user filters):
<div class="panel_contents">
<form method="get" id="q_search" class="filter_form" action="/admin/users" accept-charset="UTF-8">
<div class="filter_form_field filter_string">
<label for="q_email" class=" label">Search User Email</label><br/>
<input type="text" name="q[email_contains]" id="q_email" />
<input type="submit" value="Go" name="commit" id="q_submit" />
</div>
</form>
</div>
and displays the result in the existing format. You don't need to design new views for that.

ASP.net 4, MVC and scriptmanager syntax to use asp: ajax control toolkit elements

Context:
I am new to MVC asp.net Framework 4. In my application i wish to update a partial view upon a user click event (using an ActionResult). In index.aspx i use the standard Ajax.BeginForm containg a div in which i render the partial view (which calls the ActionResult):
*<%using (Ajax.BeginForm("Search", "Home", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divToUpdate" }))
{ %>
Name
<input id="txtName1" name="RoleName" type="text" value="" />
<br />
<br />
<div id="divToUpdate">
<%--render what you want to update here.. --%>
<%Html.RenderPartial("~/Views/Shared/SecurityMainPartialView.ascx", Model); %>
</div>
<br />
<input type="submit" id="btnSubmit" value="Search" />
<% }%>*
The updating of the partial view works. However:
The issue:
In the Site.Master i had the form tag, which i had to remove becuase the partial view would redirect the action link to Index instead of search. in removing this i can no longer use the asp:scriptmanager tag which is needed to use the asp.tab etc etc...
I get the following error: *Control 'ctl00_MainContent_ScriptManager1' of type 'ScriptManager' must be placed inside a form tag with runat=server.* error even on the ActionLinks in the site master.
Site master code:
*<body>
<%-- <form id="form1" runat="server">
--%> <div id="container">
<div id="header">
<h1 style="width: 1207px; margin-left: 0px">PROM (Promise Remote Order Management)</h1>
<div id="menubar">
**<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("Security", "SecurityMain", "Security")%></li>
<li style="width: 1208px; height: 0px"><%= Html.ActionLink("About", "About", "Home")%></li>**
</div>
</div>
<div id="content" style="height: 100%; width: 100%;">
<asp:ContentPlaceHolder ID="MainContent" runat="server" >
<p style="height: 132px; margin-top: 0px">
</p>
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<p>© footer stuff goes here!</p>
</div>
</div>
<%-- </form>--%>
</body>
</html>*
QUESTION:
How can i incorporate the use of scripts (ScriptManager) in my Asp.net MVC 4 app? Do i use MVC ScriptManager or something else? I know we are not supposed to use script manager in MVC as it breaks the rules...what is my alternative.
Thank you any help would be greatly appricitaed.
you shouldn't use web controls in asp.net mvc application. You can do it but I don't recommend. You can use some javascript libs like jQuery, Ext.Js etc... to do async operations in your View.
I like jQuery it's easy, fast to learn and develop and cross-browser (works in i.e., firefox, chrome, etc...) and I've been using it on my web apps with asp.net mvc and works very fine. Take a look at this link: http://api.jquery.com/jQuery.ajax/ it will show to you some operations with ajax (get/post calls, json result etc...) usign jquery lib.
jQuery comes in default template of asp.net mvc of visual studio, use it :)
Cheers!

set div as target container for result page of a post method

.I have a div tag that is also divided into two divs. here is the code:
<div>
<div id="search">
<form id="try" method="post">
Batch: <input id="batch" name="batch" type="text"/>Dept: <input id="dept" name="dept" type="text"><input type="submit"/>
</div>
<div id="receiver">
</div>
</div>
I have placed a search option in the div named "search" using post method. what i want to do is that when i click the submit button the page to receive the values will appear on the div named "receiver".
is this possible? if it is, please help..
The ways you have for this are:
1 - The simplest - instead of a div - use an IFrame like this
<div id="search">
<form id="try" method="post" target="receiver" action="url-to-server-Page">
Batch: <input id="batch" name="batch" type="text"/>
Dept: <input id="dept" name="dept" type="text" />
<input type="submit"/>
</form>
</div>
<iframe name="receiver" id="receiver"></iframe>
</div>
The disadvantage in this case is that the search-result that come in this case from url-to-server-page - is a complete and independent HTML page that is nested in your search page.
It is not effected by styles of the parent page, and the communication between them for JavaScript operations is rather combersome.
2 - with some JavaScript skills you can use AJAX.
There are many libraries on the net that can help you do it in very few lines of code.
jQuery is the simplest, although it's the one I like least...
http://jquery.com/
3 - use a full round-trip
<div id="search">
<form id="try" method="post" target="receiver" action="url-to-server-Page">
Batch: <input id="batch" name="batch" type="text"/>
Dept: <input id="dept" name="dept" type="text" />
<input type="submit"/>
</form>
<div id="receiver">
<?php if (isset($_POST['batch']) && isset($_POST['dept'])){
//display search results here.
}
?>
</div>
</div>
You want what's called "AJAX." There are a number of libraries available, such as Google Web Toolkit or jQuery to accomplish what you want.
Can you clarify? Is this a php page and you are posting to self or are you looking to use ajax to populate the div?
If it is php and you post to self then you can simply check if the post has been made inside that div :
<div id="receiver">
<?php if (isset($_POST['batch']) && isset($_POST['dept'])){
//display search results here.
}
?>
</div>

Resources