I have created a search page which returns a list of objects to be displayed on a webgrid. I am using the webgrids default paging. The problem arises when I try to page to the second page of search results - I am taken back to the search page. How do I use the deafult paging functionality of the razor webgrid and achieve paging through search results ?
Actionmethod :
[HttpPost]
public ActionResult GetEmails(UserResponse response )
{
if (response.RefId != null)
{
int refID = Convert.ToInt32(response.RefType);
var query = from c in db.tb_EmailQueue
where c.ReferenceTypeId == refID && c.ReferenceId.Contains(response.RefId)
select c;
var results = new List<tb_EmailQueue>();
results.AddRange(query);
return View("Index", results);
}
return View();
}
Search Page View :
<body>
#using (Html.BeginForm())
{
#Html.DropDownListFor(x=> x.RefType, (IEnumerable<SelectListItem>) ViewBag.Categories,"Please select reference type")
<br/>
<p>Reference Type</p>
#Html.TextBoxFor(x => x.RefId)
<input type ="submit" value="Submit" />
}
#using (Html.BeginForm())
{
#Html.TextBoxFor(x=>x.Date, new{#id="example1"})
<input type ="submit" value="Submit" />
<br/>
}
Results Display View :
#{
if (Model.Any())
{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 100);
#grid.GetHtml(tableStyle: "table table-striped table-bordered", columns: grid.Columns(
grid.Column(header: "EmailQueueId",
columnName: "EmailQueueId",
format: item => Html.ActionLink(((int) item.EmailQueueId).ToString(), "Details", new {id = item.EmailQueueId})),
grid.Column("QueueDateTime", canSort: true, format: #<text>#item.QueueDateTime.ToString("dd/MM/yy H:mm:ss")</text>),
grid.Column("ReferenceTypeID"),
grid.Column("ReferenceID"),
grid.Column(header: "ToList",
columnName: "ToList",
format: #<input type ="text" value="#item.ToList" title="#item.ToList" readonly="readonly"/>),
grid.Column(header: "Subject",
columnName: "Subject",
format: #<input type ="text" value="#item.Subject" title ="#item.Subject" readonly="readonly"/>),
grid.Column("FailureCount")
))
}
else
{
<p>No records</p>
}
}
Since you get back what page number being asked for, and you know how many results you're looking for, you're just missing a piece to your LINQ query. I don't use the SQL syntax, so please excuse this, though it should be easily translatable to your methodology.
var query = (from c in db.tb_EmailQueue
where c.ReferenceTypeId == refID && c.ReferenceId.Contains(response.RefId)
select c).Skip((pageNumber - 1) * pageSize).Take(pageSize);
You want (pageNumber - 1) because your pageNumber will be 1-based, and if you're looking for the first page, you don't want to skip anything (0 * pageSize). With those results, you just want to Take() however many are going to be displayed on the page.
The problem of paging and sorting with WebGrid a filtered subset of a table has been solved for the ASP.NET Web Pages framework by Mike Brind in this article: Displaying Search Results In A WebGrid.
I have tried to translate it in MVC, but I am more comfortable with Web Pages, so be tolerant.
Controller
public ActionResult Customers(string country)
{
var search = (country == null ? "" : country);
NORTHWNDEntities db = new NORTHWNDEntities();
var query = from c in db.Customers
where c.Country.Contains(search)
select c;
var results = new List<Customers>();
results.AddRange(query);
return View("Customers", results);
}
View
#{
var grid = new WebGrid(Model, rowsPerPage:5);
}
<hgroup class="title">
<h1>Customers</h1>
</hgroup>
<section id="searchForm">
#using (Html.BeginForm()){
<p>
Country: #Html.TextBox("Country", #Request["Country"])
<input type="submit" />
</p>
}
</section>
<section>
<div>
#grid.GetHtml(columns:grid.Columns(
grid.Column(columnName:"CompanyName",header:"Name"),
grid.Column(columnName:"Address"),
grid.Column(columnName:"City"),
grid.Column(columnName:"Country")
))
</div>
</section>
#section scripts{
<script type="text/javascript">
$(function(){
$('th a, tfoot a').on('click', function () {
$('form').attr('action', $(this).attr('href')).submit();
return false;
});
});
</script>
}
I have used the Northwind sample db; if you want to use my same db, you can find it at this link.
The solution keeps the search form and the WebGrid in the same page, because every time you change pagination or sort order, you must repost the search criteria to filter the table.
According with Mike Brind, "The answer to the problem lies in the snippet of jQuery that appears in the script section. A handler is attached to the onclick event of the links in the table head and table foot areas - or the sorting and paging links. When they are clicked, the value of the link is obtained and provided to the form's action attribute, then the form is submitted using POST, and the GET request is cancelled by return false. This ensures that paging and sorting information is preserved in the Request.QueryString collection, while any form field values are passed in the Request.Form collection."
Related
I cant seem to figure this out. I have a view page that's for adding a product to an order. There's a dropdown list where you select the product you want to add. Once you select a product, I have an onchange function that basically inserts the value of the Product ID into a hidden input field. Where I'm stuck is I have an action link that goes to a different controller and a different model so I can't just use the Model.ProductID when I use the id parameter. Is there a way to get the value of the input field that is essentially the ProductID value from the product selected and use that as the id parameter on the actionlink? The actionlink opens a product view that shows a pic of the product and the qty in stock. but when I click on the link, its not getting the id value of the product selected.
Here is the relevant part of my view page:
<div class="form-group">
<label class="lbl3">Product:</label><span class="required"> *</span><label class="ddl1">#Html.DropDownListFor(model => model.ProductID, ViewBag.ProductID as SelectList, "--Select a Product--", new { #class = "form-control prod-ctl", #onChange = "selectedText(this)" })</label>
<input type="hidden" id="txt" name="poProduct" required />
<label class="lbl2">Qty Ordered:</label><span class="required"> *</span><input type="text" inputmode="numeric" class="col-md-3 form-control qty-ctl" name="poQtyOrdered" id="poQtyOrdered" required />
<label class="chk-link"><a class='prod-modal chk-stock' href="#Url.Action("AmtInStock", "Products", new { id = "THIS IS WHERE IM STUCK" })"><span class="fa solid fa-search"> <u>Check Stock</u></span></a></label>
<script>
function selectedText(ddlitem) {
var selvalue = ddlitem.value;
var seltext = ddlitem.options[ddlitem.selectedIndex].innerHTML;
$('#txt').val(selvalue);
}
</script>
Here is my controller for the actionlink:
public ActionResult AmtInStock(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
var product = db.Products.Find(id);
if (product == null)
{
return HttpNotFound();
}
return PartialView("AmtInStock", product);
}
and lastly, here is the ddl code in controller for the main page:
ViewBag.ProductID = new SelectList(db.Products, "ProductID", "Product_Code");
So I need to be able to select a product in the dropdown list and if I click on the actionlink, I need to be able to get the value of that selected item to pass in the id parameter.
Thanks,
Kip M.
I have a search box that searches by using EMPLID. Search works but if I go to any other page after doing search (Ex: If I switch to details page) and then navigate back to the page I did search on, It displays all the records. How can I keep the search criteria so that when I navigate between pages it shows information of that EMPLID?
My controller:
public ActionResult Index(string SearchString)
{
var emp = from e in db.EMPLOYMENTs
select e;
if (!String.IsNullOrEmpty(SearchString))
{
emp = emp.Where(s => s.EMPLID.Contains(SearchString));
}
return View(emp);
}
My Layout:
#using (Html.BeginForm())
{
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text" name="SearchString">
</div>
</form>
}
You can use TempData for preserving the search string.
Add your SearchString in temp data like this-
TempData["SearchString"] = SearchString;
...and get back the value when required-
string searchString = TempData["SearchString"] as string;
Please refer this msdn article for more information on passing Data in an ASP.NET MVC Application
You have two options: to use TempData or to use Session State.
Follow the examples:
http://www.dotnetcurry.com/aspnet-mvc/1074/aspnet-mvc-pass-values-temp-data-session-request
http://www.codeproject.com/Articles/818493/MVC-Tempdata-Peek-and-Keep-confusion
TempData keep() vs peek()
How to keep search value after delete in MVC
I'm new to MVC and JavaScript and I have a question about DropDownList.
I Build a program of "Car Renting" and I have a View that allow adding new Car to the inventory.
The view include 2 dropdownlists (see below):
<div class="editor-field">
#Html.DropDownList("ManufacturerId", string.Empty)
#Html.ValidationMessageFor(model => model.ManufacturerId)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ModelId)
</div>
<div class="editor-field">
#Html.DropDownList("ModelId", string.Empty)
#Html.ValidationMessageFor(model => model.ModelId)
</div>
I want that when user select a manufacturer for example (Alfa Romeo) the "model" list box will display only "Alfa Mito" models and not the full list...
My Controller function send to the view the Model List using ViewBag see below:
public ActionResult AddNewCar()
{
ViewBag.ManufacturerId = new SelectList(db.Manufacturers, "ManufacturerId", "ManufacturerName");
ViewBag.ModelId = new SelectList(db.Models, "ModelId", "ModelName");
ViewBag.BranchId = new SelectList(db.Branchs, "BranchId", "BranchName");
return View();
}
Please advice.
Thanks,
Almog
call below action method from jquery on dropdown change event.
public List<carmodels> PopulateState(int manufacturerId)
{
var carmodelsObj = (from st in dc.Carmodels
where st.manufacturerId.Equals(manufacturerId)
select st).ToList();
return (carmodelsObj);
}
You need to repopulate/populate your ModelId dropdown on every time when your first dropdown changes (using jquery). Do following:
Get the ManufactureId from first dropdown on change event. and place an ajax call to repopulate your second dropdown.
$("#ManufactureId").change(function() {
var manufacturerId = manufacturer$('#ManufacturerId').val();
$.ajax({url: "~/Car/GetCarsByManufacturer", success: function(result){
//re populate your second dropdown here
//hint: you may use response.id for value
}});
});
Create a function in your controller that returns Car Models, based on selected. (call this function in previous step using ajax).
public List<carmodels> GetCarsByManufacturer(int manufacturerId)
{
var carmodelsObj = (from st in dc.Carmodels
where st.manufacturerId.Equals(manufacturerId)
select st).ToList();
return (carmodelsObj);
}
I want to access the value of button in controller and then pass it to the view as well.
But the value of "str" passed from view to controller is null.
Index.chtml
#{
var str = "Shoes";
}
<a href="~/Home/Products_By_Category/#str" target="_parent">
<input type="button" value="Shoes" class="btn"/>
</a>
/////////////////////////
<pre lang="c#">
public ActionResult Products_By_Category(string s)
{
ViewBag.category = s;
return View();
}
Have the same name s for your input also.
Use ViewBag.category in the client side. Since ViewBag is a dynamic entity.
Are you using form submit in which case MVC will automatically fill the value of the input for you.
Now I'm using
Index.cshtml
#{
var str="Shoes";
}
<form action="~/Home/Products_By_Category/#str" method="post">
<input type="submit" value="Shoes" class="btn"/>
</form>
/////////////
public ActionResult Products_By_Category(string s)
{
var context = new Shoe_StoreDBEntities();
var q = from p in context.Products
join c in context.Categories on p.CategoryId equals c.Id
where c.Name.Equals(s)
select new { p, c };
}
but still the value in "s" is still null
First. The controller passes data to the view. There is no other way around. It's because the basic nature of a webapplication.
Basically: Request -> controller -> select and render a view.
The view itself is not a known concept in the client browser. That is simple html/css/js.
Your view should looks like this:
#{
var str = "Shoes";
}
#using (Html.BeginForm("Products_By_Category"))
{
<input type="submit" name="s" id="s" value="#(str)"/>
}
Some note:
1) If you use a variable inside an html element attribute you have to bracket it.
2) You should use the builtin html helper whenever it's possible (beginform)
3) This example only work if you click the submit button to postback the data. If there is other submit button or initiate the postback from js, the button data is not included into the formdata. You should use a hidden field to store the str value and not dependent from the label of the button:
#{
var str = "Shoes";
}
#using (Html.BeginForm("Products_By_Category"))
{
<input type="hidden" id="s" name="s" value="#(str)"/>
<input type="submit" value="Do postback"/>
}
This maybe very simple but I cant seem to sort it out on my own.
I have created a simple db and entity modal that looks like this
I am trying to create an Create form that allows me to add a new Order. I have a total of 3 tables so what I am trying to do is have the form allowing the person to enter Order date and also has a dropdown list that allows me to select a product from the product table
I want to be able to create a Add or Edit view that allow me to insert the OrderDate into the OrderTable and also insert the OrderID and selected ProductID into OrderProduct.
What steps do I need to do here.
I have created an OrderController and ticked the "Add Actions" and than added a Create View which looks like this
#model Test.OrderProduct
#{
ViewBag.Title = "Create2";
}
<h2>Create2</h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>OrderProduct</legend>
<div class="editor-label">
#Html.LabelFor(model => model.OrderID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.OrderID)
#Html.ValidationMessageFor(model => model.OrderID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ProductID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ProductID)
#Html.ValidationMessageFor(model => model.ProductID)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
This creates the view that contains a textbox for both OrderID and ProductID however no date.
My controller CreatePost hasnt been changed
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
var data = collection;
// TODO: Add insert logic here
// db.Orders.AddObject(collection);
return RedirectToAction("Index");
}
catch
{
return View();
}
}
My questions are,
1.How do I swap out ProductID textbox to be a dropdown which is populated from Product
2.How do I get the data from FormCollection collection? I thought of just a foreach however I dont know how to get the strongly typed name
Any help for a newbie would be very helpful.
Thank you!
First thing's first, don't bind to the Order entity. Never bind to an EF object, always try and use a ViewModel. Makes life simpler for the View, and that is the goal here.
So, have a ViewModel like this:
public class CreateOrderViewModel
{
public int OrderId { get; set; }
public DateTime OrderDate { get; set; }
public int SelectedProductId { get; set; }
public IEnumerable<SelectListItem> Products { get; set; }
}
That's it right now.
Return that to your View in your [HttpGet] controller action:
[HttpGet]
public ActionResult Create()
{
var model = new CreateOrderViewModel
{
Products = db.Products
.ToList() // this will fire a query, basically SELECT * FROM Products
.Select(x => new SelectListItem
{
Text = x.ProductName,
Value = x.ProductId
});
};
return View(model);
}
Then to render out the list of Products: (basic HTML excluded)
#model WebApplication.Models.CreateOrderViewModel
#Html.DropDownListFor(model => model.SelectedProductId, Model.Products)
The only thing i don't know how to do is bind to the DateTime field. I'm guessing you would need an extension method (HTML Helper) which renders out a Date Picker or something. For this View (creating a new order), just default to DateTime.Now.
Now, onto the [HttpPost] controller action:
[HttpPost]
public ActionResult Create(CreateOrderViewModel model)
{
try
{
// TODO: this manual stitching should be replaced with AutoMapper
var newOrder = new Order
{
OrderDate = DateTime.Now,
OrderProduct = new OrderProduct
{
ProductId = SelectedProductId
}
};
db.Orders.AddObject(newOrder);
return RedirectToAction("Index");
}
catch
{
return View();
}
}
Now, i also think your EF model needs work.
To me (in English terms), a Product can have many orders, and an Order can have many Products.
So, it should be a many-to-many. Currently it's a 1-1 with a redundant join table. Did you generate that from a DB? If so, your DB possibly needs work.
You should have a navigational property called Products on the Order entity, which references a collection of Product, made possible by a silent join to the join table in the many-to-many.
This also means you no longer have a DropDownList, but a MultiSelectDropDownList.
Thanks Craig. Your few days (as at time of posting) of MVC have solved my few days of trying to get the selected value back from DropDownListFor.
I had no problem in the Create view in getting the selected value of the DDLF, but the Edit view was a completely different matter - nothing I tried would get the selected value back in the Post. I noticed the selected value was lurking in the AttemptedValue of the ModelState, and so Dr.Google referred me here.
I had this in my view
#Html.DropDownList(model => model.ContentKeyID, Model.ContentKeys, Model.ContentKeyName)
where ContentKeys is a SelectList populated from the DB via a ViewModel, and ContentKeyName is the curently selected name.
The wierd thing is, I have another DDL on the view populated in an identical manner. This one works. Why, I don't know. It is the second DDL on the form, but I can't see that making a difference.
I read somewhere else it might have been that I was using Guids as the Id, but that didn't seem to make a difference - I changed to Int32, but don't think I had to - I think it's enums that disagree with DDLF. Nullables seemd to make no difference either.
Now that I've added the form collection to my Post ActionResult, and get the selected value using
-view
#Html.DropDownList("ContentKey", Model.ContentKeys)
-in controller (Post)
contentKeyId = int.Parse(form.GetValue("ContentKey").AttemptedValue);
all is good, and I can get on with more exciting things. Why is that the simplest things can hold you up for so long?
I have been struggling with this over the last day or so too. I'll share my limited knowledge in the hope that it will help someone else.
Note that I use a singleton with a pre-populated list to keep my example application small (i.e. no EF or DB interaction).
To show the ProductList you will need to have a ViewBag or ViewData item which contains the ProductList.
You can set this up in the Controller with something like
ViewData["ProductList"] = new SelectList(Models.MVCProduct.Instance.ProductList, "Id", "Name", 1);
Then update your View to something like:
<div class="editor-field">#Html.DropDownList("ProductList")</div>
For the Post/Create/Update step you need to look into the FormCollection to get your results. Reading other posts it sounds like there used to be a bug in here, but it's fixed now so ensure you have the latest. For my example I have a DropDownList for Product so I just get the selected Id and then go searching for that Product in my list.
[HttpPost]
public ActionResult Create(FormCollection form )//Models.MVCOrder newOrder)
{
MVC.Models.MVCOrder ord = Models.MVCOrder.Instance.CreateBlankOrder();
//Update order with simple types (e.g. Quantity)
if (TryUpdateModel<MVC.Models.MVCOrder>(ord, form.ToValueProvider()))
{
ord.Product = Models.MVCProduct.Instance.ProductList.Find(p => p.Id == int.Parse(form.GetValue("ProductList").AttemptedValue));
ord.Attribute = Models.MVCAttribute.Instance.AttributeList.Find(a => a.Id == int.Parse(form.GetValue("attributeId").AttemptedValue));
UpdateModel(ord);
return RedirectToAction("Index");
}
else
{
return View(ord);
}
}
I've only been working on MVC3 for the last few days, so any advice on improving the above would be appreciated.