IsAjaxRequest() is always false and partial view will not reload - c#

I have looked at every other stackoverflow post and none of them work.
This is the bit in my Browse page
#using (Ajax.BeginForm("Browse", "Store",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "this"
}))
{
#Html.TextBox("searchString")
<input type="submit" value="Search"/>
}
<div id="this">
#Html.Partial("_Listings", Model)
</div>
This is my bundle
bundles.Add(new ScriptBundle("~/bundles/shell").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
This is in my _Layout file
#Scripts.Render("~/bundles/shell")
And this is the partial view that should be refreshed when I click the Search button
<div id="listings">
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Title)
</th>
<th>
#Html.DisplayNameFor(model => model.Description)
</th>
<th>
#Html.DisplayNameFor(model => model.Price)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<div class="text-right">
<tr>
<td>
<h1>#Html.DisplayFor(modelItem => item.Title)</h1>
</td>
<td>
<h1> #Html.DisplayFor(modelItem => item.Description)</h1>
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td></td>
</tr>
</div>
}
</table>
</div>
I can't quite figure out what is going wrong. The controller is fine because the whole page refreshes with the searchString, but I can't get the div with id="this" to reload. I'm pretty sure my bundles are correct.
Controller
[HttpPost]
public ActionResult Browse(string searchString)
{
var model = storeRepo.AllProducts(searchString).Take(10);
if (new HttpRequestWrapper(System.Web.HttpContext.Current.Request).IsAjaxRequest())
{
Debug.WriteLine("IsAjax");
return PartialView("_Listings", model);
}
return View("Browse", model);
}

Related

Whats the best way of using ajax jquery to load partial views onto a specific page?

I have a index page the code looks like this
#model PagedList.IPagedList<PartialViews.Models.Customer>
#using PagedList.Mvc
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="container">
<table class="table">
<tr>
<th>
Title
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Email Address
</th>
<th>
Phone Number
</th>
<th>
Modified Date
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.EmailAddress)
</td>
<td>
#Html.DisplayFor(modelItem => item.Phone)
</td>
<td>
#Html.DisplayFor(modelItem => item.ModifiedDate)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.CustomerID }) |
#Html.ActionLink("Details", "Details", new { id = item.CustomerID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.CustomerID })
</td>
</tr>
}
</table>
#Html.PagedListPager(Model,page=>Url.Action("Index",new{page,pageSize=Model.PageSize}))
</div>
My CustomersController has this code
private AdventureWorksLT2012Entities db = new AdventureWorksLT2012Entities();
// GET: Customers
public ActionResult Index(int page=1, int pageSize=10)
{
List<Customer> customers = db.Customers.ToList();
PagedList<Customer> cust = new PagedList<Customer>(customers,page,pageSize);
return View(cust);
//return View(db.Customers.ToList());
}
Heres the Main page where i want the Customers List from the Index action to be shown
#model PartialViews.Models.Customer
#{
ViewBag.Title = "Main";
}
<body>
<div class="container">
<h2>Customer's List</h2>
<div id="dvCustomerDetails" style="width: 50%; height: 130px;display: none"></div>
</div>
</body>
<script type="text/javascript">
$.ajax({
url: 'Customers/Index',
contentType: 'application/html;',
type: 'GET',
dataType:'html'
})
.success(function(result) {
$('#dvCustomerDetails').html(result);
})
</script>
I want to display this table onto a new page as a partial view using ajax jquery but I am having trouble implementing it.
I was able to use RenderPartial method to display it as a partial view but i am having trouble doing it with ajax. Any help or suggestion will be appreciated.

PagedList<T> does not contain a definition for the properties of my Model <T>

I have this partial View as below:
#model IPagedList<Student>
<h2>List of Students</h2>
<div id="studentList">
<div class="pagedList" data-uwa-target="#studentList">
#Html.PagedListPager(Model,page=>Url.Action("Index",new { page }),
PagedListRenderOptions.MinimalWithItemCountText)
</div>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.LastName) //here error
</th>
<th>
#Html.DisplayNameFor(model => model.FirstName) //here error
</th>
<th>
#Html.DisplayNameFor(model => model.City) //here error
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.City)
</td>
</tr>
}
</table>
<div class="row">
<div class="col-sm-6" id="slid">
<button id="export" class="btn btn-default btn-primary" onclick="location.href='#Url.Action("ExportInCSVFormat")';return false;">Export Student List in CSV Format</button>
</div>
<div class="col-sm-4" id="excelSlide">
<button id="excelExport" class="btn btn-default btn-success" onclick="location.href='#Url.Action("ExportStudentsInExel")';return false;">Export Student List in Excel Format</button>
</div>
</div>
My Index.cshmtl is :
#model IPagedList<Student>
#{
ViewBag.Title = "Index";
}
#Html.Partial("_Student", Model)
My StudentController is
public ActionResult Index(int page=1)
{
var model = dbAllStudents.Students
.OrderByDescending(p => p.LastName)
.ToPagedList(page, 10);
return View(model);
}
The problem happens to "#Html.DisplayNameFor(model => model.LastName)". It is saying that " IPaged does not contatin a definition for LastName.
I have an idea that the problem is caused because to the Index method of Student Controller I need to add .Select but I am not sure for that. I would really appreciate if someone can help me
It's not working, because overloaded method which you want to use doesn't fit with your interface. It's for IEnumerable<> types. You can access to the first element in the list and it should returns you correct value even if list is empty.
Change your table definition to:
<table class="table">
<tr>
<th>
#Html.DisplayNameFor( => Model[0].LastName)
</th>
<th>
#Html.DisplayNameFor(_ => Model[0].FirstName)
</th>
<th>
#Html.DisplayNameFor(_ => Model[0].City)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(_ => item.LastName)
</td>
<td>
#Html.DisplayFor(_ => item.FirstName)
</td>
<td>
#Html.DisplayFor(_ => item.City)
</td>
</tr>
}
</table>
and everything will be ok.

Using sql command with controller in view

INSERT INTO SaleItem (ProdId, SaleQuantity) SELECT ProdId, BasketProdQuantity FROM Basket;
This is my SQL command and I want to use it with a button on a view. But I don't know how to references method with button on view. And should I use SqlConnection connection = new SqlConnection(connectionString) I already connect my DB with WebConfig and it connected as DefaultConnection.
EDIT:
I'm new at MVC and Web coding so I don't know what to do.
[HttpPost]
public ActionResult Buy(SaleItem saleitem)
{
if (ModelState.IsValid)
{
string query = "INSERT INTO SaleItem (ProdId, SaleQuantity) SELECT ProdId, BasketProdQuantity FROM Basket";
db.Database.ExecuteSqlCommand(query);
db.SaveChanges();
return RedirectToAction("Index", "Basket");
}
return View(saleitem);
}
and there is the view that I want to use buy method.
#model IEnumerable<VeriPark001.Models.Basket>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Product.Book.BookName)
</th>
<th>
#Html.DisplayNameFor(model => model.BasketProdQuantity)
</th>
<th>
#Html.DisplayNameFor(model => model.Product.ProdPrice)
</th>
<th>
Total
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Product.Book.BookName)
#Html.DisplayFor(modelItem => item.Product.MovieDVD.DVDName)
#Html.DisplayFor(modelItem => item.Product.MusicCD.CDName)
</td>
<td>
#Html.DisplayFor(modelItem => item.BasketProdQuantity)
</td>
<td>
#Html.DisplayFor(modelItem => item.Product.ProdPrice)
</td>
<td>
#(item.Product.ProdPrice * item.BasketProdQuantity)
</td>
<td>
<button>#Html.ActionLink("Delete", "Delete", new { id = item.BasketId })</button>
<button>#Html.ActionLink("Update quantity", "Edit", new { id = item.BasketId })</button>
</td>
</tr>
}
</table>
<p>
<button>I WANT TO CALL ACTION HERE. I search for how to do that and couldn't find a proper way.</button>
<button>#Html.ActionLink("Products", "Index", "Product")</button>
</p>
You can use Html.BeginForm and send a post request to your controller action.
Replace your
<p>
<button>I WANT TO CALL ACTION HERE. I search for how to do that and couldn't find a proper way.</button>
<button>#Html.ActionLink("Products", "Index", "Product")</button>
</p>
with
#using (Html.BeginForm("Buy", "YourController", FormMethod.Post))
{
// Input for your SaleItem model
<button class="btn btn-group btn-group-sm" type="submit">Submit</button>
}
Since your Buy action requires a SaleItem model I'll leave it up to you.

asp.net mvc pass parameters between view and controller

I am a novice in asp.net and i want create simple database application.
I need pass parameters between view and controller to retrieve data from database.
i need only this data which title is "something". I create simple left menu which contains search settings.
This is my view page.
#model IEnumerable<TwojaBiblioteka.Models.Ksiazka>
#{
ViewBag.Title = "Home Page";
}
#Styles.Render("~/Content/css")
<div class="jumbotron">
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2">
<h2>Szukaj</h2>
<div class="textboxes">
<input type="text" name="Tytul" class="form-control" id="Tytul" placeholder="Tytuł..." />
<input type="text" name="txtAutor" class="form-control" id="txtAutor" placeholder="Autor..." />
<input type="text" name="txtISBN" class="form-control" id="txtISBN" placeholder="ISBN..." />
</div>
<center>
#Ajax.ActionLink("Szukaj", "SzukajKsiazki", new AjaxOptions()
{
HttpMethod="GET",
UpdateTargetId= "divKsiazki",
InsertionMode= InsertionMode.Replace
})
</center>
</div>
<div id="divKsiazki"class="col-md-10 ">
</div>
</div>
</div>
</div>
This is view for display data from database:
#model IEnumerable<TwojaBiblioteka.Models.Ksiazka>
<table class="table" style="border:1px solid black;">
<tr>
<th>
#Html.DisplayNameFor(model => model.Tytul)
</th>
<th>
#Html.DisplayNameFor(model => model.Autor)
</th>
<th>
#Html.DisplayNameFor(model => model.ISBN)
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Tytul)
</td>
<td>
#Html.DisplayFor(modelItem => item.Autor)
</td>
<td>
#Html.DisplayFor(modelItem => item.ISBN)
</td>
</tr>
}
</table>
And this is my controller:
public PartialViewResult SzukajKsiazki()
{
string tytul="something";
var ksiazkilist = db.Ksiazka.Where(x => x.Tytul == tytul).ToList();
return PartialView("_ListaKsiazek",wypozyczone);
}
So how i can pass data from my textboxes to controller to display only those records which contains textbox text?
Your controller action should accept a parameter. In Asp.Net MVC, it is normal for this to be the model:
public PartialViewResult SzukajKsiazki(IEnumerable<TwojaBiblioteka.Models.Ksiazka> model)
Your view should have all of the editor elements from the model enclosed in a form and you need a submit button:
#using (Html.BeginForm("SzukajKsiazki", "ControllerName", FormMethod.Post)
{
<table class="table" style="border:1px solid black;">
<tr>
<th>
#Html.DisplayNameFor(model => model.Tytul)
</th>
<th>
#Html.DisplayNameFor(model => model.Autor)
</th>
<th>
#Html.DisplayNameFor(model => model.ISBN)
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Tytul)
</td>
<td>
#Html.DisplayFor(modelItem => item.Autor)
</td>
<td>
#Html.DisplayFor(modelItem => item.ISBN)
</td>
</tr>
}
</table>
<input type="submit" value="submit">
}

ASP.NET MVC save button loading but not working

I have implemented a save button in my .NET application on the index page. When I click it, it loads, but does not save anything. I am just using the index page for checkboxes. If I uncheck something and save it, it saves, but also unchecks everything else in that row. Nothing happens when I try to check something. Here is the code I'm using:
Index.cshtml
#using (Html.BeginForm("save", "drnos"))
{
<input type="submit" value="Save" />
}
An example of one of my check box fields:
<td>
#Html.EditorFor(modelItem => item.Soft)
#Html.ValidationMessageFor(modelItem => item.Soft)
</td>
drnosController.cs
[HttpPost]
public ActionResult save(Doctor doc)
{
System.Diagnostics.Debug.WriteLine("Save Called");
db.Entry(doc).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
Here is the whole HTML file:
#model PagedList.IPagedList<drnosv6.Models.Doctor>
#using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
#{
ViewBag.Title = "Index";
}
<h2>Doctors</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#using (Html.BeginForm()) //insert the search bar
{
<p>
Find by First Name, Last Name, or RVH ID: #Html.TextBox("SearchString")
<input type="submit" value="Search" />
</p>
}
#using (Html.BeginForm("save", "drnos"))
{
<input type="submit" value="Save" />
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('tr:even').addClass('alt-row-class');
});
</script>
<p>
</p>
<p>Click on a column header to sort by that column</p>
<table>
<tr>
<th>
#Html.ActionLink("RVH ID", "Index", new { sortOrder = ViewBag.IDSortParm })
</th>
<th>
#Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.LastSortParm })
</th>
<th>
#Html.ActionLink("First Name", "Index", new { sortOrder = ViewBag.FirstSortParm })
</th>
<th>
Middle Initial
</th>
<th>
Degree
</th>
<th>
Group
</th>
<th>
Adm Priv
</th>
<th>
#Html.ActionLink("QCPR", "Index", new { sortOrder = ViewBag.QCPRSortParm })
</th>
<th>
#Html.ActionLink("Keane", "Index", new { sortOrder = ViewBag.KeaneSortParm })
</th>
<th>
#Html.ActionLink("Orsos", "Index", new { sortOrder = ViewBag.OrsosSortParm })
</th>
<th>
#Html.ActionLink("Soft", "Index", new { sortOrder = ViewBag.SoftSortParm })
</th>
<th>
#Html.ActionLink("3M", "Index", new { sortOrder = ViewBag.threeMSortParm })
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
using (Html.BeginForm("Save", "Doctor", FormMethod.Post))
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.RVH_ID_)
</td>
<td>
#Html.DisplayFor(modelItem => item.Last_Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.First_Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Middle_Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Degree1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Group)
</td>
<td>
#Html.DisplayFor(modelItem => item.AdmPriv)
</td>
<td>
#Html.DisplayFor(modelItem => item.QCPR)
</td>
<td>
#Html.EditorFor(modelItem => item.Keane)
#Html.ValidationMessageFor(modelItem => item.Keane)
</td>
<td>
#Html.EditorFor(modelItem => item.Orsos)
#Html.ValidationMessageFor(modelItem => item.Orsos)
</td>
<td>
#Html.EditorFor(modelItem => item.Soft)
#Html.ValidationMessageFor(modelItem => item.Soft)
</td>
<td>
#Html.DisplayFor(modelItem => item.C3M)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.RVH_ID_ })
#Html.ActionLink("Details", "Details", new { id = item.RVH_ID_ })
</td>
</tr>
}
}
</table>
<p>
<input type="submit" value="Save" />
</p>
<br />
Page #(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of #Model.PageCount
#Html.PagedListPager(Model, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
Your BeginForm or ActionLink has to point to ActionResult Edit.
When a form is submitted, only the inputs declared within that form get submitted. You only have the submit button in your form, so there are no other fields to fill out your Doctor structure. You need to have your save button on the same form as all your other fields.

Categories

Resources