Search form is shown differently when using AJAX vs standard - c#

When I use the bootstrap search form like this, I get this output (as I wanted):
#using (Html.BeginForm("Search", "Show", FormMethod.Get, new { #class = "form-search" })) {
<div class="input-append">
<input type="search" class="span2 search-query" name="query" />
<input type="submit" class="btn" value="Search" />
</div>
}
However, when I want to turn this into a ajax form, I'm receiving this output:
#using (Ajax.BeginForm(
new AjaxOptions {
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "contentlist"
})) {
<div class="input-append">
<input type="search" class="span2 search-query" name="query" />
<input type="submit" class="btn" value="Search" />
</div>
}
Why does the type of form make a difference? The generated HTML is the same in both cases.
Edit: solved, I'm a dumbass.

I think there is no class name for the ajax form. You should add class = "form-search".

Related

How to handle a send parameter button in asp.net MVC c #?

How to handle a send parameter button in asp.net MVC c #?
<form id="form" name="form" action="" method="post">
<label>Nom : </label>
<input type="text" id="NAME" name="NAME" class="form-control" value=#Model.NAME required />
<input type="submit" value="importer />
</form>
Use Ajax begin Form to get it
In the Html
#using (Ajax.BeginForm("test", "Inicio", new AjaxOptions { HttpMethod = "Post", OnSuccess = "Sucesso(data);" }))
{
<label>Nom : </label>
<input type="text" id="name" name="name" class="form-control" required />
<input type="submit" value="importer" />
}
In The controller
[HttpPost]
public ActionResult test(string name)
{
return Json(new { retorno = name }, JsonRequestBehavior.AllowGet);
}

how to set dynamic controller name in the partial page

I have a partial page it is using two View page different controller but there have same Edit Action method. i need to set controller name dynamically for particular page in the run time . how can i do it ?
My partial page _SearchProduct in the shared folder it is working only for WomanController action method Edit:
<div class="row">
<div class="col-md-6">
#using (Html.BeginForm("Edit", "Woman", FormMethod.Get))
{
<p>
Find by Product Id : #Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<input type="submit" value="Search" />
</p>
}
</div>
<div class="col-md-6">
<span style="color:green">#ViewBag.ProductName </span>
</div>
<span style="color:red"> #ViewBag.FindResult </span>
</div>
My WomanController EDIT page :
#model MKL.Models.WomanProduct
<hr />
#Html.Partial("~/Views/Shared/_SearchProduct.cshtml")
<hr />
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true)
#Html.HiddenFor(model => model.WomanProductId)
#if (ViewBag.ProductId != null)
{
#Html.Hidden("ProductId", (int)ViewBag.ProductId)
}
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
My ManController EDIT page :
#model MKL.Models.ManProduct
<hr />
#Html.Partial("~/Views/Shared/_SearchProduct.cshtml")
<hr />
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true)
#Html.HiddenFor(model => model.ManProductProductId)
#if (ViewBag.ProductId != null)
{
#Html.Hidden("ProductId", (int)ViewBag.ProductId)
}
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
SO need to dynamically set Partial view Controller name Man and Woman
#using (Html.BeginForm("Edit", "", FormMethod.Get)){}
You can pass a model to the partial controller:
#Html.Partial("~/Views/Shared/_SearchProduct.cshtml", Model)
In _SearchProduct.cshtml, Model will be of type WomanProduct or ManProduct, depending on the view that called Partial. Then, choose controller depending on the model type:
#{
var ctrl = Model is WomanProduct ? "Woman" : "Man";
}
#using (Html.BeginForm("Edit", ctrl, FormMethod.Get))
Well, I would suggest you to use #Html.Action to render your partialview. Consider below example.
#Html.Action("GetSearchPartial", "Controller", new {controller = "Women"})
//in the Women Edit View
#Html.Action("GetSearchPartial", "Controller", new {controller = "Man"})
//in the Man Edit View
Now write an action which returns ParialViewResult.
public PartialViewResult GetSearchPartial(string controller)
{
ViewBag.Controller=controller;
return PartialView("_SearchProduct");
}
in your _SearchProduct - PartialView get the ViewBag data and assign it as controller.
#{
string controller=ViewBag.Controller;
}
<div class="row">
<div class="col-md-6">
#using (Html.BeginForm("Edit", controller, FormMethod.Get))
{
<p>
Find by Product Id : #Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<input type="submit" value="Search" />
</p>
}
</div>
<div class="col-md-6">
<span style="color:green">#ViewBag.ProductName </span>
</div>
<span style="color:red"> #ViewBag.FindResult </span>
</div>
Let know if you face any issues
Try this way
#using (Html.BeginForm("Edit", #HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString(), FormMethod.Get)){}
instead of the actual location of the partial view. so dynamically set Man or Woman controller name

POST data to controller with ASP.NET MVC

I am using ASP.NET MVC with C# and pure bootstrap. One of my views contains a label, text input box, and a submit button:
#{
ViewBag.Title = "BinSearch";
Layout = "~/Views/Shared/_LayoutSearch.cshtml";
}
<h2>BinConfig Search</h2>
#using (Html.BeginForm("FiEdit", "EditConfigController"))
{
<div class="form-group">
<label for="issuerKey">Issuer Key</label>
<input type="text" name="key" />
<input type="submit" class="btn btn-default" value="Search" />
</div>
}
When I click the "submit" button, I would like to transfer the data to a controller, EditConfigController to this method:
[HttpPost]
public ActionResult FiEdit(int key)
{
return View(new IssuerKey().Key = key);
}
Which then is supposed to create a new view where I can edit data based off the key provided. This is the FiEdit view:
#model BinFiClient.Models.IssuerKey
#{
ViewBag.Title = "FiEdit";
Layout = "~/Views/Shared/_LayoutEdit.cshtml";
}
<h2>FiEdit</h2>
However, when I click the "submit" button, I receive a 404 error, and the URL path looks like this:
http://localhost:58725/EditConfigController/FiEdit
Which is actually the path to the method in the controller that I posted above.
What I need is basically a way to POST data to another controller. How can I accomplish this?
Edit:
Now I am receiving the error:
The model item passed into the dictionary is of type 'System.Int32', but this dictionary requires a model item of type 'BinFiClient.Models.IssuerKey'.
Try replacing your code with the following:
#using (Html.BeginForm("FiEdit", "EditConfig", FormMethod.Post))
{
<div class="form-group">
<label for="issuerKey">Issuer Key</label>
<input type="text" name="key" />
<input type="submit" class="btn btn-default" value="Search" />
</div>
}
This will POST the parameter key to the EditConfig controller.
If you'd like to post to the action TestEdit in another controller, say the TestController, your code should be changed to the following:
#using (Html.BeginForm("TestEdit", "Test", FormMethod.Post))
...
To resolve the "model item passed into the dictionary" error, change your POST to be this:
[HttpPost]
public ActionResult FiEdit(int key)
{
return View(new IssuerKey() { Key = key });
}
ou can try with:
#using (Html.BeginForm(("FiEdit", "EditConfigController", FormMethod.Post,
new { enctype = "multipart/form-data" })))
{
<div class="form-group">
<label for="issuerKey">Issuer Key</label>
<input type="text" name="key" />
<input type="submit" class="btn btn-default" value="Search" />
</div>
}

Ajax.BeginForm: What to return from controller to prevent page refresh?

This is the controller:
[HttpPost]
public async Task<ActionResult> Run(Job job, HttpPostedFileBase productRequestFile, HttpPostedFileBase masterFile, string SignalRConnectionId)
{
return View(job);
}
And this is the view:
#using (Ajax.BeginForm("Run", "Job", null, new AjaxOptions(){ HttpMethod = "POST", UpdateTargetId = "container" }, new {enctype="multipart/form-data"} ))
{
<input type="file" name="masterFile" id="masterFile" class="btn btn-default" required />
<input type="file" name="productRequestFile" id="productRequestFile" class="btn btn-default" required />
#Html.TextAreaFor(m => m.Parameters, new { #class = "control form-control" })
#Html.ValidationMessageFor(m => m.Parameters)
<input type="hidden" id="SignalRConnectionId" name="SignalRConnectionId" />
#Html.HiddenFor(m => m.Name)
<table><tr><td></td></tr></table>
<div id="container"></div>
<button id="StartButton" type="submit" class="btn btn-lg btn-primary center-block">Start job</button>
}
Right now I'm returning View(job) but that causes a page refresh. If I return null, then the page goes blank. What can I return so that nothing happens to the page?
You need to give update target id in ajax options. Also, what Ajax form does is, it posts the form to the specified URL and then replaces(by default) all the content of UpdateTargetId div with content received as response, so in you case it is mandatory to return view, else, it will be blank.
My problem is that I was missing a reference to jquery.unobtrusive-ajax

Uploading a file with filtering its extension

I have an ASP.Net web application in which i have to upload a file:
#using (Html.BeginForm("Uploading_validation", "Super", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="dossier" accept="*.iso, *.rar, *.zip"/>
<br />
#Html.Label("Date d'expiration")
<input type="text" id="datepicker" name="duree" />
<br />
<input type="submit" value="OK" />
}
I'd like accept just the extensions accept="*.iso, *.rar, *.zip", but it didn't work.
Why does this filter not work? How can i modify the code?
You can use the FileExtensions to achieve this:
[Required, FileExtensions(Extensions=".iso,.rar,.zip", ErrorMessage="Incorrect file format")]
Add Dossier to your model to pass it back to the view and render it like this:
#Html.TextBoxFor(m => m.Dossier, new { type = "file" })
#Html.ValidationMessageFor(m => m.Dossier)
It should validate both client and server-side.
accept attribute don't supported by all of browsers. You can't rely on client side and should filter files in action.
BTW, you should use this attribute this way:
accept="application/iso,application/rar,application/zip"
Upd: in other way you can validate file extension with javascript: look at sample
this snippet seems to be acceptable by all browsers
#using (Html.BeginForm("Uploading_validation", "Super", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="dossier" accept=".rar , .zip"/>
<br />
#Html.Label("Date d'expiration")
<input type="text" id="datepicker" name="duree" />
<br />
<input type="submit" value="OK" />
}

Categories

Resources