Im showing a table of data using a paginated list, with a search box and submit button above this. I wish to be able to search this table of data then re-Post the view and update with the newly searched for data on the click of the submit button. How would I do this in MVC? Would I have to start looking at AJAX or JQuery or can it be done using the built in GET and POST techniques?
Sorry if the question doesn't make a whole load of sense, I'm new here and to MVC :D
The basic pattern is the same whether it's AJAX or not. You would have 2 actions for your view, a GET and a POST, your search form should be a simple ViewModel with the fields you'd search/sort on that also includes your pagination.
[HttpGet]
public ActionResult DataTable(int? page){
var data = myRepository.GetData(page);
return View(data);
}
[HttpPost]
public ActionResult DataTable(int? page, SearchModel search){
var data = myRepository.GetSearchedData(page, search);
return View(data);
}
If you were doing it via AJAX the difference is that you'd have the data display in a PartialView, your DataTable View would render this partial within a named div, the HttpPost method would return a PartialView and you'd replace the named div's contents with this result (JQuery's $.load() method would be the easiest way to do this).
Related
In asp.net web forms we have user controls as reusable components for pages. These user controls can be passed values externally through public properties e.g. on a web form we can drop this user control to display a text which came from db (like content managed system) by setting key as public property to this user control and it will pull the value. ( this key, value can be stored in application cache as list or dictionary to avoid DB round trips).
I want to implement same idea in asp.net mvc, but new to it. Any expert suggestion to implement same idea will be very helpful? Thanks
The concept of a user control is a PartialView; there are two ways to use a partial view. The first is to define a partial in the view itself:
#Html.Partial("NameOfViewInControllerFolder", ModelForPartialview)
The second way is have an action method that returns a partial view:
public ActionResult X()
{
return PartialView("NameOfView");
}
And from your view use:
#Html.Action("X", "ControllerName")
And that will call the action method, and insert the results. To ensure that action is only called within the a view, you can use the [ChildActionOnly] attribute.
If an action method, you can use JQuery to request it via AJAX, and load the results into a view:
$.ajax({
type: "GET|POST",
url: "#Url.Action("X", "ControllerName")",
success: function(d) { /* d is HTML */ });
I have a partial view that is strongly typed. I have a drop down inside that partial view. I have rendered that partial view on the view. I need to get the item that was selected on the dropdown on the form submit. How do I get it?
Any help is appreciated.
Thanks,
Naveen
Give that drop down a name attribute at render time. Then, in post Controller Action, make sure to have a string with the same name as a parameter. Binding is done automagically for you by the framework
For example, in your view, you'd have something like this:
Html.DropDownList("myDropDown", SomeListOfValues);
Then in your controller's post action:
public ActionResult MyPostAction(string MyDropDown) {
// do whatevs with it
}
P.S. same idea works even if you construct your list using just HTML. Set some breakpoints and try it out for yourself
I'm new to ASP.NET MVC and I'm using the example outlined in Steven Sanderson's book to create a multi-page, wizard like form for a web application.
(See http://books.google.com/books?id=lfPkn31fpNQC&pg=PA477#v=onepage&q&f=false for the exact example).
I have it working to the point where I can persist data across pages, but I have no idea how to do this for a DropDownList control or a ListBox control.
Can anyone show me how to do this?
Thanks.
Quite simply the dropdown list is an HTML select control, it's value will be in the form values posted to the action so if you set your form to post to an action then in the aciton you need:
public ActionResult RecieveForm(FormCollection values)
{
var dropdownSelectedvalue = values["nameofdropdown"];
...
work with result
...
return View()
}
I am using ASP.NET MVC and jquery. I would like to implement preview functionality to a form. i.e. I have a form with number of fields for example name, address etc.. Before the user submits the info, he/she can preview it as to how it will appear on the site. Could any one please point me to right direction as to how I could implement this in a cleaner way? I have tried regenearting the html on click.. but it's very messy.
Any help will be highly appreciated.
You could create a new Controller Action called Preview(YourModel model); which would display everything as needed for preview.
The Preview-View should be Strongly typed with your model containing a Submitbutton which THEN calls the [HttpPost]Save/Update(YourModel model); Action.
I'd go with the preview without posting the form, although generating the html could get a bit messy but you can use microsoft's template plugin (included in jquery 1.4.3) to alleviate that. In my book, you're on the right track already.
It should be pretty similar to your "View"<-> "Read" Action from the CRUD operations, the only difference is, you are not populating the model from the database because its not saved yet (in some cases) and you already have the model binded from the FormColecction.
public ActionResult View(int id)
{
//get the data from the DB
//populate the model
//return the view
}
public ActionResult PreView(YourModel model)
{
//populate the model or some pre-formatting
//return the view
}
Using Ajax on the Preview Action get the job done and you don't need to use too much js (that is always a little messy)
When we have anything that requires user input (Eg adding a product to a database) the Edit screen looks the same as the add screen. When using MVC .Net how do you handle this? Do you return the same view? Just adjust the model to reflect the change?
Same (partial)view
You create only one but strong typed view (depending on the UI it can of course be a partial view as well). When adding new data return this view from controller action with default model object instance (usually just a new instance without any properties being set), but when you edit, return it with the object instance that you'd like to edit.
Controller part
Regarding controller actions you can have four of them:
Add GET
return View("SomeView", new Customer());
Add POST
Edit GET
return View("SomeView", new CustomerRepository().GetCustomer(id));
Edit POST
Bot GET actions return the same view but with different model as described earlier. POST actions both store submitted data, but return whatever they need to. Probably some RedirectToAction()...
You can use the same view for display and Edit, simply call it from your controller
return View("ViewName")
You could have the form fields in a partial view and have two separate views using the same partial view, one posting to the edit controller action method and the other posting to the add controller action method.
Partial views are used to remove duplicity. You could read an example of this in the Nerd Dinner tutorial.