I'm going crazy on this... I've been trying to figure out how to use ajax to update a partial view for quite some time... I've got to be missing something simple and easy.
I'm in VS2012, MVC4.
First, I do have these bundles loaded:
#Styles.Render("~/css")
#Styles.Render("~/Content/themes/base/css")
#Scripts.Render("~/js" )
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/jqueryval")
I have also tried to specify the unobtrusive script manually as well...
Then I have this in my view:
#using (Ajax.BeginForm("Index_AddGroup", new AjaxOptions { UpdateTargetId = "AddGroupList" }))
{
<div>
#Html.LabelFor(model => Model.NewGroups.GroupName)
</div>
<div>
#Html.DropDownListFor(model => Model.AllGroups.nSelectGroupID, Model.AllGroups.GroupList, "Select Group to Add")
<input type="submit" value="Add Group" />
</div>
}
Then I load a partial view:
<div id="AddGroupList">
#if(Model.Groups != null)
{
#Html.Partial("_AddGroups", Model.Groups);
}
</div>
In that partial view I do the following:
#model IEnumerable<MyApp.ViewModels.Group>
#{
ViewBag.Title = "Added Groups";
}
<h2>Groups to be Added</h2>
<table>
<tr>
<th>Group Name</th>
<th>Added until</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>#Html.DisplayFor(model=>item.GroupName)</td>
<td>#Html.DisplayFor(model=>item.EndDate)</td>
</tr>
}
Controller:
[HttpPost]
public ActionResult Index_AddGroup(SearchedUser viewModel)
{
AddGroupsContext db = new AddGroupsContext();
Group NewGroup = new Group();
NewGroup.GroupName = "test";//viewModel.
db.Groups.Add(NewGroup);
db.SaveChanges();
return PartialView("_AddGroups", db.Groups);
}
I loaded up fiddler and clicked on the button but no request was being sent. Why isn't that javascript/ajax code running?
I think you need a submit button. try:
<input type="submit" value="Add Group" />
Also i think you will need to add a reference to as it doesn't look like it is included anywhere:
jquery.unobtrusive-ajax.js
I think you can get it through nuget if you dont have it already.
otherwise here is a script tag that includes a CDN link:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js"></script>
Related
I am new to Asp.Net Mvc. I couldn't find a solution that worked for me here, if I am blind just redirect me.
I am trying to make a web-app where i can search through clients, without displaying the entire table of clients. Only after the user presses search, the search result should show as a partial view. I understand that using Ajax is the most popular way of handling something like this.
Any pointers on how to accomplish this?
My first thought was to just make a display: block/none script connected to the submit button but the page updates each time you search rendering this idea useless. That's why i could use some help with how to asynchronously update the web page with the search result.
HomeController:
using testForAutofill.Models;
//Search Functionality
[HttpPost]
public PartialViewResult Index(string searchTerm)
{
test_Db_Context db = test_Db_Context();
List<ViewNewOrderSum> orderSums;
if (string.IsNullOrEmpty(searchTerm))//Fix this.
{
orderSums = db.ViewNewOrderSum.ToList();
}
else
{
orderSums = db.ViewNewOrderSum.Where(x =>
x.ClientName.Equals(searchTerm)).ToList();
}
return PartialView(orderSums);
}
Index View:
#model IEnumerable<testForAutofill.Models.ViewNewOrderSum>
#using (Html.BeginForm())
{
<b>Kundenavn:</b>
#Html.TextBox("searchTerm", null, new { id = "txtSearch" })
<input type="submit" value="🔍 Search" class="btn btn-primary" id="btn-search" />
}
<div id="posts-wrapper"></div>
<div class="client-div" runat="server" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body" id="client-Card">
<h4 class="card-title">Client info</h4>
<table id="client-table">
<tr>
<th>
#Html.DisplayNameFor(model => model.ClientName)
</th>
</tr>
#foreach (var item in Model)
{
#Html.Partial("_OrderSum", item)
}
</table>
</div>
</div>
Partial View:
#model testForAutofill.Models.ViewNewOrderSum
<tr>
<td>
#Html.DisplayFor(modelItem => Model.ClientName)
</td>
</tr>
No need of using Ajax. You can submit search text in Form Post. Fetch your data and filter based on your searchTerm retun to View with model. If your model is not null or empty show table else do not display table.
Checkout the below code :
View :
#model List<testForAutofill.Models.ViewNewOrderSum>
#using (Html.BeginForm()) {
<b>Kundenavn:</b>
#Html.TextBox("searchTerm", null, new { id = "txtSearch" })
<input type="submit" value="🔍 Search" class="btn btn-primary" id="btn-search" />
}
#if (Model != null && Model.Count() > 0) {
<div class="client-div" runat="server" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body" id="client-Card">
<h4 class="card-title">Client info</h4>
<table id="client-table">
<tr>
<th>
ClientName
</th>
</tr>
#foreach (var item in Model) {
#Html.Partial("_OrderSum", item)
}
</table>
</div>
</div>
}
Controller :
public ActionResult Index()
{
//if you want to load all the clients by default
test_Db_Context db = test_Db_Context();
List<ViewNewOrderSum> orderSums;
orderSums = db.ViewNewOrderSum.ToList();
return View(orderSums);
}
[HttpPost]
public ActionResult Index(string searchTerm) {
test_Db_Context db = test_Db_Context();
List<ViewNewOrderSum> orderSums;
if (!string.IsNullOrEmpty(searchTerm))
{
orderSums = db.ViewNewOrderSum.Where(x =>
x.ClientName.Equals(searchTerm)).ToList();
}
return View(result);
}
My first thought was to just make a display: block/none script
connected to the submit button but the page updates each time you
search rendering this idea useless.
You can prevent the page from updating using something like the following (using jQuery):
<script type="text/javascript">
$('form').submit(function (evt) {
evt.preventDefault();
... your code
});
</script>
Then you can make your ajax POST call, get the data, unhide table headers and append the html results from your partial view.
I work on asp mvc5 project.
I have this view:
#using (Html.BeginForm("About", "Home", FormMethod.Post, new { id = "myForm", #class = "btn btn-featured btn-white" }))
{
foreach (var item in Model)
{
<tr>
<td>
<a href="javascript:document.getElementById('myForm').submit()">
<span class="hidden">#Html.Raw(Json.Encode(item))</span>
<span>#item.Name</span>
</a>
</td>
</tr>
}
}
as ypu can see I have this row in view above:
#Html.Raw(Json.Encode(item))
And here is action method:
[Authorize]
[HttpPost]
public ActionResult About(FormCollection objViewDataModel )
{
//some logic
return View(userGroup);
}
when I click on anchor tag on the view the action methos About is fired in controller, I need to access
to hidden span control but I dont see it in my objViewDataModel.
Any idea what I do wrong and how to access JSON inside hidden span control?
If you want something to be posted in a form, it should be in an input element, not a span.
So change <span class="hidden" to <input type="hidden" and give it a name.
I have gone through previous posts on the same topic but I couldn't figure out what's wrong with my code. Here's my html
#model Models.Submissions
#{
ViewBag.Title = "Application";
}
<h2 class="Centre" >#ViewBag.Title</h2>
#using (Html.BeginForm("Create","Submissions",FormMethod.Post))
{
#Html.ValidationSummary(true)
<fieldset>
<table id="ApplicationTable">
<tr>
<td>
#Html.LabelFor(model => model.SubmissionId)
</td>
<td>
#Html.TextBoxFor(model => model.SubmissionId)
</td>
</tr>
<tr>
<td>
#Html.LabelFor(model => model.SubmissionDate)
</td>
<td>
#Html.TextBoxFor(model => model.SubmissionId)
</td>
</tr>
</table>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Here's my controller. The button click doesn't trigger the http post method of the submissions controller . By the way, my controller is "SubmissionsController"
public ActionResult Create()
{
return View();
}
[HttpPost]
public ActionResult Create(Submissions submission)
{
try
{
// TODO: Add insert logic here
// my logic
return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
Thanks..! Help Appreciated
Seems you're trying to include jquery validation for the form as well, so my humble guess would be, that your client-side validation prevents postback to the server due to a validation error. Try to disable that validation and try again. Can't provide more info, because I don't know what exactly does your javascript do, but I think you should be able to fix it yourself now.
And as Jonesy correctly pointed out, you have a typo in your code. The second textbox should be model.SubmissionDate. That is probably causing the validation error I've mentioned earlier.
I am new to asp.net MVC 4. i have some problems dealing with attributs
i use [httppost] attribut in my controller but it's not working
it's not even invoked
my controller
public ActionResult Inscription()
{
return View();
}
[HttpPost]
public ActionResult Inscription(Candidat candidat)
{
if (!ModelState.IsValid)
{
return View(candidat);
}
return RedirectToAction("Index");
}
my view
#model ProcRec.Models.Candidat
#{
ViewBag.Title = "Inscription";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Html.ValidationSummary(true)
<div class="form_settings">
#using (Html.BeginForm("Inscription", "CandidatController"))
{
<table ="#FFFFFF">
<tr>
<td>#*<span >Nom :</span>*# #Html.LabelFor(model => model.nom_candidat)</td>
<td> #Html.TextBoxFor(model => model.nom_candidat)
#Html.ValidationMessageFor(Model => Model.nom_candidat)
.
.
</table>
}
<input type="submit" class="submit right" value="Inscription" />
think you for your help
Just correct beginform as :
#using (Html.BeginForm("Inscription", "CandidatController",FormMethod.Post))
{
........
<input type="submit" class="submit right" value="Inscription" />
}
Put submit button inside BeginForm() and give BeginForm() FormMethod as Post.
Thankzz..
Put your <submit> element inside the form:
#using (Html.BeginForm())
{
...
<input type="submit" class="submit right" value="Inscription" />
}
Don't need to change Html.BeginForm. By default it's POST.
Check : FormExtensions.BeginForm
Only issue is with the submit button, it should be inside form as mentioned in Andy Refuerzo's answer. Don't know why it is down-voted.
I work on one of my first ASP MVC-programs at the moment.
The program should show me a list of product, and with a link beneath the name of the product it should be possible to edit the product. No problem so far.
#model MVC3Demo.Product
#{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
#using (Html.BeginForm("Save", "Product"))
{
<div>
<input type="hidden" id="ID" name="ID" value="#Model.ID" />
ProduktID #Model.ID
</div>
<div>
Produktname <input id="Name" name="Name" type="text" value=#Model.Name />
</div>
<div>
Preis <input id="Price" name="Price" type="text" value=#Model.Price />
</div>
<div>
<input type="submit" value="Speichern"/>
</div>
}
Now I have written a Save action method that should update my data:
public ActionResult Save(Product p)
{
ProductRepository rep = new ProductRepository();
rep.Update(p);
return RedirectToAction("List");
}
The "List"-View is where I can see all products with the edit-link.
The problem is, that if I press the save-button, it redirects me to the old list, not to the updated one. I debugged my project and I´m sure that the update-method works correct and updates the product.
My List action is:
#model IEnumerable<MVC3Demo.Product>
#{
ViewBag.Title = "List";
}
<h2>List</h2>
<ul>
#foreach (MVC3Demo.Product p in Model)
{
<li>#p.Name #Html.ActionLink("bearbeiten", "Edit", "Product", p, null)</li> //new{ ID = p.id}
}
</ul>
Because you asked, here is the List Action:
public ActionResult List()
{
ProductRepository rep = new ProductRepository();
return View(rep.GetAll());
}
So where could be my mistake?
It looks like you're calling the update, but you're not actually submitting the transaction itself, does your repository have a SubmitChanges, AcceptChanges or Commit or something similar? As with DataTables, your changes won't actually take effect (save to the database) until you call AcceptChanges.
Try include an HttpPost attribute at Save controller method.
[HttpPost]
public ActionResult Save(Product p)
{
ProductRepository rep = new ProductRepository();
rep.Update(p);
return RedirectToAction("List");
}