I have a problem wherein when a form is submitted, it should trigger a modal when it is valid and if it is not valid, it should trigger the validation script. I have tried looking for answers in the forum and came across one problem that resembles mine. But unfortunately, the modal still doesn't pop-up.
What I wanted to happen was when a user clicks the submit button, a validation will run and if all data is valid, it will trigger the modal to pop-up and if invalid, the validation will occur just like here.
MODEL
public class Reg
{
[Required(ErrorMessage = "Please enter first name")]
public string Firstname { get; set; }
[Required(ErrorMessage = "Please enter MiddleInitial")]
public string MiddleInitial { get; set; }
[Required(ErrorMessage = "Please enter Surname")]
public string Surname { get; set; }
}
CONTROLLER
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(Reg reg)
{
return View();
}
VIEW
#model WebApplication1.Models.Reg
<div class="col-lg-offset-4 col-lg-12">
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(model => model.Firstname, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.Firstname, new { htmlAttributes = new { #class = "form-control", placeholder = #Html.DisplayNameFor(m => m.Firstname) } })
#Html.ValidationMessageFor(model => model.Firstname, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.MiddleInitial, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.MiddleInitial, new { htmlAttributes = new { #class = "form-control", placeholder = #Html.DisplayNameFor(m => m.MiddleInitial) } })
#Html.ValidationMessageFor(model => model.MiddleInitial, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Surname, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.Surname, new { htmlAttributes = new { #class = "form-control", placeholder = #Html.DisplayNameFor(m => m.Surname) } })
#Html.ValidationMessageFor(model => model.Surname, "", new { #class = "text-danger" })
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
}
</div>
<div id="modals" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirm Submit
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
</div>
<div class="modal-body">
#Html.Partial("CedulaPartial")
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" value="Submit" class="btn btn-success" />
</div>
</div>
</div>
</div>
JQUERY
<script type="text/javascript">
$('form').submit(function () {
if ($(this).valid()) {
$('#modals').modal('show');
}
});
I also have tried
$('#myModal').modal("show");
$('#myModal').dialog('open');
$('#myModal').modal();
$('#myModal').show();
$('#myModal').modal('toggle');
but still no luck.
Thanks in advance.
UPDATE
After modifying the script, what happens is that the form cannot be clicked. I think the modal is being triggered but no modal is showing. Here is the output:
https://media.giphy.com/media/61Z50T2JEpN1Zrk8hZ/giphy.gif
Until I came across this, I tried removing the fade command in class and now the modal is showing. I am currently using Bootstrap v3.0.0 and the fade command has a bug in here. Thanks for your support guys!
Related
I'm doing validation on User login input I wanted to be like ab12123. so I validate it by javascript to validate on button click. if it is not valid, it should show a message. the problem is the function doesn't work and I open the dev tools to inspect the javascript, there is no error.
the view:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
<label class="control-label col-md-2">
User Login <span class="required" id="star">*</span>
</label>
<div class="col-md-4">
#Html.TextBox("UserLogin", null, new { #class = "form-control", required = "required" , id= "UserLogin" })
<div class="col-lg-3" id="checkID" hidden>
<label style="color:red">Please enter the ID in the Proper Format Numbers only EX:kl12123</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">
Username <span class="required" id="star">*</span>
</label>
<div class="col-md-4">
#Html.TextBox("UserName" , null, new { #class = "form-control", required = "required", id = "UserName" } )
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">
Groups <span class="required" id="star">*</span>
</label>
<div class="col-md-4">
#Html.DropDownList("GroupID", null, htmlAttributes: new { #class = "form-control", required = "required" , id= "GroupID" })
#Html.ValidationMessageFor(model => model.GroupID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" class="btn btn-success" value="ValidateMe" onclick="ValidateMe()" />
</div>
</div>
</div>
}
javascript:
function ValidateMe() {
//$('#GroupID').on('change', function () {
var IDValid = false;
var Login = $('#UserLogin').val();
var name = $('#UserName').val();
var GroupId = $('#GroupID').val();
if (Login.length < 6) {
$('#checkID').show();
IDValid = false;
}
else {
var regexnumber = new RegExp(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/);
if (regexnumber.test(Login)) {
$('#checkID').hide();
IDValid = true;
}
else {
$('#checkID').show();
IDValid = false;
}
}
if (IDValid == true) {
var data = {
UserLogin: Login,
UserName: name,
UserGroup: GroupId
};
$.ajax({
type: 'POST',
url: '/Account/SaveUser',
data: data
});
}
}
I appreciate your help in this matter.
Thank you.
MVC can automatically handle client side validation using jQuery-validate, which should come pre-setup. It uses attributes on the model to set the validation requirements, and the Html.HelperFor extensions for model binding. You should see this line in App_Start/BundleConfig.cs confirming it's installed:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
If not, you can download it here, unZIP and install in the Scripts directory, and add the above line to your BundleConfig.cs.
You would use this method like so:
Model
using System.ComponentModel.DataAnnotations;
public class User
{
[Required]
[RegularExpression(#"(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}", ErrorMessage = "Please enter the ID in the Proper Format Numbers only EX:kl12123")]
public string UserLogin { get; set; }
[Required]
public string UserName { get; set; }
[Required]
public int UserGroup
}
View
#model Namespace.User
// Replace the #Html.TextBox() helpers with these:
#Html.TextBoxFor(model => model.UserLogin, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.UserLogin, "", new { #class = "text-danger" })
#Html.TextBoxFor(model => model.UserName, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.UserName, "", new { #class = "text-danger" })
#Html.DropDownListFor(model => model.UserGroup, null, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.UserGroup, "", new { #class = "text-danger" })
// Place the following at the very bottom of your view:
#section scripts
{
#Scripts.Render("~/bundles/jqueryval")
}
Gives us this:
Good day! I want to create a modal that pops-up when the user clicks the submit button only if the form is valid just like this. The form validation works perfectly after click but when the form is valid, nothing happens to the form and the modal doesn't pop-up.
I have tried the solutions in here such as
$('#myModal').modal("show");
$('#myModal').dialog('open');
$('#myModal').modal();
$('#myModal').show();
$('#myModal').modal('toggle');
but still not popping up.
VIEW
<div class="col-lg-offset-4 col-lg-12">
#using (Html.BeginForm("CedulaModule", "ApplicationForm", FormMethod.Post, new { id = "contactForm", name = "contactForm" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.ApplicationCode, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.ApplicationCode, new { htmlAttributes = new { #class = "form-control", #Value = #ViewBag.iAppFrmDet, #readonly = "readonly" } })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Firstname, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.Firstname, new { htmlAttributes = new { #class = "form-control", placeholder = #Html.DisplayNameFor(m => m.Firstname) } })
#Html.ValidationMessageFor(model => model.Firstname, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.MiddleInitial, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.MiddleInitial, new { htmlAttributes = new { #class = "form-control", placeholder = #Html.DisplayNameFor(m => m.MiddleInitial) } })
#Html.ValidationMessageFor(model => model.MiddleInitial, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Surname, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.Surname, new { htmlAttributes = new { #class = "form-control", placeholder = #Html.DisplayNameFor(m => m.Surname) } })
#Html.ValidationMessageFor(model => model.Surname, "", new { #class = "text-danger" })
</div>
<div class="form-group">
<input type="submit" value="Save" id="validate" class="btn btn-default"/>
</div>
</div>
}
MODAL
<div id="myModal" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirm Submit
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
</div>
<div class="modal-body">
#Html.Partial("CedulaPartial")
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" value="Submit" class="btn btn-success" />
</div>
</div>
</div>
JQUERY
<script type="text/javascript">
$('#contactForm').submit(function (e) {
e.preventDefault();
if ($(this).valid()) {
$('#myModal').modal("show");
}
});
Thanks in advance.
If your form is valid save this information in any TempData and check this var on form load if data flag is exist then show your modal.
Add TempData in control post action.
TempData[“modalValid”]=true;
On form load using JavaScript.
$(document)ready(function (){
If(#TempData[“modalValid””]==true)
//display your modal
//set null in TempData
});
This code is not tested this is only for your reference.
UPDATE
After running into this post. I was able to make the code also work. Unfortunately, it was the class that was causing me error. As soon as I removed it, my code also worked. Thanks for the help.
The e.preventDefault() call is preventing the submit every time. Even when the form is valid. Try using a flag "confirmed" to make sure the e.preventDefault() is only called before the modal has been shown.
var confirmed = false;
function SubmitConfirmfunction() {
confirmed = false;
$("#contactForm").submit();
}
$(document).ready(function () {
$('#contactForm').submit(function (e) {
if (confirmed == false) {
if ($(this).valid()) {
confirmed = true;
e.preventDefault();
$('#myModal').modal("show");
}
}
});
});
I'm working on a asp.net MVC project. I want to show user a dialog box after form posted, for user to understand if it was successful or not, and also if user wants to close the dialog box it would be possible.
I searched a lot and read something that I can return partial view but i'm not sure if partial view is what I need in this situation
my question is that is it possible to do it a way with java-script with .dialog() or if I should use partial view, then please give me a little explanation how it works.
I need something like this to show after user click on submit button
http://jsfiddle.net/db5SX/
here is my controller:
public ActionResult Index()
{
ViewBag.ResultMessage = TempData["ResultMessage"];
return View();
}
public ActionResult Create()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "Id,Name,Email,Phone,Message,Date")] Contact_US contact_US)
{
if (ModelState.IsValid)
{
db.Contact_US.Add(contact_US);
db.SaveChanges();
TempData["ResultMessage"] = "POSTED SUCESSFULLY...! We WILL CONTACT YOU SOON.";
return RedirectToAction("Index");
}
return View(contact_US);
}
here is my view if needed:
<div class="form-group col-md-8">
<h3 class="txtformat padbot50px">Get in touch with us</h3>
<div class="text-danger message ">
#ViewBag.ResultMessage
</div>
#using (Html.BeginForm("Create", "Contact_Us", FormMethod.Post, new { #id = "contactusform" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-md-2 txtformat" })
<div class="col-md-12">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Email, htmlAttributes: new { #class = "control-label col-md-2 txtformat" })
<div class="col-md-12">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Phone, htmlAttributes: new { #class = "control-label col-md-2 txtformat" })
<div class="col-md-12">
#Html.EditorFor(model => model.Phone, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Phone, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group hidden">
#Html.LabelFor(model => model.Date, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Date, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Date, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Message, htmlAttributes: new { #class = "control-label col-md-2 txtformat" })
<div class="col-md-12 contactusmsg">
#Html.TextAreaFor(model => model.Message, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Message, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group contactuspostbtn">
<div class="col-md-12">
<input id="postcontactusmessage" type="submit" value="Send" class="btn btn-default" data-toggle="modal" data-target="#myModal" />
</div>
</div>
</div>
}
</div>
</div>
information of my layout if needed :
<script src="~/Scripts/jquery-3.1.0.min.js"></script>
<link href="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/tinymce/tinymce.min.js"></script>
A good way to do this is to have it abstracted in a base controller and show the message in the _layouts.cshtml file, for example:
Create a base controller that will be inherited by all of your controllers
public class BaseController : Controller
{
public string SucccessMessage
{
get
{
return TempData["SuccessMessage"] as string;
}
set
{
TempData["SuccessMessage"] = value;
}
}
public string ErrorMessage
{
get
{
return TempData["ErrorMessage"] as string;
}
set
{
TempData["ErrorMessage"] = value;
}
}
}
In _Layouts.cshtml,
<div class="container body-content" id="bodyContainer">
<div class="spacer"></div>
#if (#TempData["SuccessMessage"] != null)
{
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
#TempData["SuccessMessage"]
</div>
}
else if (#TempData["ErrorMessage"] != null)
{
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
#TempData["ErrorMessage"]
</div>
}
<div class="spacer"></div>
#RenderBody()
<hr id="hr" />
<footer>
<p>© #DateTime.Now.Year - Your APp </p>
</footer>
</div>
Now, all you need to do inside your controller is:
public class MyController:BaseController
{
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "Id,Name,Email,Phone,Message,Date")] Contact_US contact_US)
{
if (ModelState.IsValid)
{
db.Contact_US.Add(contact_US);
db.SaveChanges();
SucccessMessage = "POSTED SUCESSFULLY...! We WILL CONTACT YOU SOON.";
return RedirectToAction("Index");
}
return View(contact_US);
}
}
In MVC 5,
I have a Dialog for editing.
The Content area is created from a Partial view.
If I have the submit button inside the form in the Partial view it works. But I would like the Save button to be at the button of the Dialog and hence outside the form and Partial view.
The problem is now that the forms data doesn't get posted. How would you fix this?
I have two ideas:
1) Wrap the form outside the Partial view
2) Make a AJAX request and not use the helper, and collect the data from the form somehow? Doesn't feel like the right way.
Dialog:
<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit database connection</h4>
</div>
<div class="modal-body">
#{ Html.RenderPartial("View"); }
</div>
<div class="modal-footer">
<button id="saveBtnSettings" type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Dialog javascript
var saveSettings = function () {
var url = buildUrl("Edit", "Setting");
$.ajax({
type: "POST",
url: url
})
.done(function (data, textStatus, jqXhr) {
alert('done' + data);
})
.fail(function (jqXhr, textStatus, errorThrown) {
alert(textStatus.toUpperCase() + ": " + errorThrown + 'Could not load html. ');
});
};
Partial view
#using (Ajax.BeginForm("Edit", "Setting", new AjaxOptions { UpdateTargetId = "div" }))
{
<fieldset>
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.User, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.User, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.User, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DataSource, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DataSource, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.DataSource, "", new { #class = "text-danger" })
</div>
</div>
</div>
</fieldset>
}
Partial view - Works with button inside of the form
#using (Ajax.BeginForm("Edit", "Setting", new AjaxOptions { UpdateTargetId = "div" }))
{
<fieldset>
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.User, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.User, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.User, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DataSource, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DataSource, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.DataSource, "", new { #class = "text-danger" })
</div>
</div>
<p>
<input type="submit" value="Calculate" /> #* WORKS WITH BUTTON INSIDE OF FORM *#
</p>
</div>
</fieldset>
}
You can place a submit button outside the form tags by specifying the form attribute (HTML5 only)
<form .... id="editform">
....
</form>
<input type="submit" form="editform" />
Note if the submit button has a value attribute, it won't be posted back.
Another option may be to use css to position it.
Just submit the form using Javascript:
function SubmitMyForm(){
document.getElementById("myForm").submit();
}
HTML:
<input type="button" value="Calculate" onclick="SubmitMyForm()" />
I think you're looking for: document.myform.submit();
Here is a Fiddle adapted form of code from this page.
To submit form below I have to click <input type="submit" value="Save" /> which is at the bottom of form pasted below:
#model WebApplication2.Models.Person
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.Id)
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-0 col-md-10">
<input type="submit" value="Save" class="btn btn-success" style="width: 200px; font-weight: bold;" />
</div>
</div>
</div>
}
This causes invoking POST Edit method in PersonController:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "Id,FirstName")] Person person) {
if (ModelState.IsValid) {
db.Entry(person).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(person);
}
I also would like to have a JavaScript function which does the same( when I invoke this function) but does not redirects me to any view. Just invokes POST Edit and passes contents of the form above.
Question: How to write JavaScript function which submits the form above without redirecting me anywhere?
function SubmitForm() {}
EDIT
I tried this.
The JavaScript method is invoked when I click #Html.ActionLink("Add a Report", "Create", "Reports", new { personId = Model.Id }, new { onclick = "SubmitForm()" }) (alert is displayed) but form is not submited(standard submit button works, so it is JavaScript function fault).
Form:
#using (Html.BeginForm(null, null, FormMethod.Post, new { name="myForm", id = "myForm" })) {
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.Id)
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
</div>
<p> #Html.ActionLink("Add a Report", "Create", "Reports", new { personId = Model.Id }, new { onclick = "SubmitForm()" })</p>
<div class="form-group">
<div class="col-md-offset-0 col-md-10">
<input type="submit" value="Save" class="btn btn-success" style="width: 200px; font-weight: bold;" />
</div>
</div>
</div>
}
and the function:
function SubmitForm() {
alert("IS INVOKED");
$("#myForm").submit();
}
Easiest way I have found. :
$("#myForm").submit();
Possible duplicate of. :
ASP.Net MVC, Submit a form using javascript
You also need to name your form. In this instance myFrom is the id of your form. Something like. :
Html.BeginForm(null, null, FormMethod.Get, new { name = "myForm", id = "myForm" })