This seems like a very simple question, but I'm getting lost, and need a few pointers.
I am using ASP.NET MVC C#, and have an Index page which displays a list of items, which is working fine.
Now I'm trying to add a DropDownList that depending on what the user selects will filter the list of items. But I keep thinking how you would do this in ASP.NET Web with RunAt Server, which I know is wrong.
Any pointers would be welcomed.
Put the select box in a form and make the form post back to a filter method in your controller.
Or
If you want to use ajax, use an Ajax.ActionLink to update the table with the filtered results
<% Ajax.ActionLink("Filter", "FilterMethod", null, new AjaxOptions { UpdateTargetId = "tableId" }, new { Title = "Filter results" }) %>
<table id="tableId"> .... </table>
Where "FilterMethod" is in yo0ur controller
This might help.
Also worth looking at:
http://jerrytech.blogspot.com/2009/06/implement-ajax-form-in-mvc-framework.html
Related
I am building an mvc app for reporting. I have a page that has a form on it which contains multiple dropdownlist to choose some criteria for a report. I then have an input button to create the report. This button call a new view from the same controller. The new view gets the values from the page where the criteria is chosen from parameters and uses that to populate it's own view model. This is all working fine.
I would like to open the reports in a new window. When I look at the controller, all of the parameters that are supposed to be coming from the selection page are null. I assume I will have to pass these in via the querystring to be picked up by the controller. Is there a way that I can get the values of the dropdownlists from within my viewpage to construct the querystring?
Is this a good way to accomplish what I am trying to do? Would I be better of using an ActionLink instead of an input button? does it make any difference?
I hope this all makes sense. Thanks for any thoughts.
Just set a target attribute on your form to _blank and it should open the request in a new page/tab depending on the browser being used.
<% using (Html.BeginForm(myAction, myController, FormMethod.Post, new { target = "_blank" })
{ %>
<%-- ... --%>
<% } %>
As NickLarsen says...
You could use the target="_blank" attribute of the form element to display the results in a new window.
<form action="/controller/action" method="post" target="_blank">
Or
<% Html.BeginForm("action", "controller", FormMethod.Post, new { target="_blank" }); %>
//...
<% Html.EndForm(); %>
I have a drop down list on my aspx form and what I want is to refresh the site after I select an item from the list. This is my drop down list:
<%: Html.DropDownListFor(x => x.CompanyUserFilterId, new SelectList(Model.CompanyUsers, "Id", "FirstName", Model.CompanyUserFilterId))%>
I use it to filter the data shown on the form depending on the selected item on the drop down list. Please help :)
you'll need to 'refresh' the site with some sort of client side mechanism onchange. A similar solution using JQuery is posted here.
The simplest method is probably to trigger an html/javascript onchange-event, and handle that to update your page (or post the form with the selected Id).
Take a look at this: http://blog.wekeroad.com/2008/10/21/asp-net-mvc-dropdownlist-and-html-attributes
I have implemented dropdown list in asp.net mvc using following code
In controller
int iSelectedNode=2;
ViewData["ddlModels"] = new SelectList(Models, "ModelCode", "ModelName", iSelectedNode);
In View
<%= Html.DropDownList("ModelCode", (SelectList)ViewData["ddlModels"],"--Select--", new {id="ddlModel" })%>
Still all the time i get to see text "--Select--" selected all the time.
Thanks in advance.
Make sure that your Models collection in the controller contains an element with ModelCode = 2.
This being said as you've tagged your question with asp.net-mvc-2 checkout this answer for a better way to handle drop down lists using strongly typed views and helpers.
I'm new to MVC, so please bear with me. :-)
I've got a strongly typed "Story" View. This View (story) can have Comments.
I've created two Views (not partials) for my Comments controller "ListStoryComments" and "CreateStoryComment", which do what their names imply. These Views are included in the Story View using RenderAction, e.g.:
<!-- List comments -->
<h2>All Comments</h2>
<% Html.RenderAction("ListStoryComments", "Comments", new { id = Model.Story.Id }); %>
<!-- Create new comment -->
<% Html.RenderAction("CreateStoryComment", "Comments", new { id = Model.Story.Id }); %>
(I pass in the Story id in order to list related comments).
All works as I hoped, except, when I post a new comment using the form, it returns the current (parent) View, but the Comments form field is still showing the last content I typed in and the ListStoryComments View isn’t updated to show the new story.
Basically, the page is being loaded from cache, as if I had pressed the browser’s back button. If I press f5 it will try to repost the form. If I reload the page manually (reenter the URL in the browser's address bar), and then press f5, I will see my new content and the empty form field, which is my desired result.
For completeness, my CreateStoryComment action looks like this:
[HttpPost]
public ActionResult CreateStoryComment([Bind(Exclude = "Id, Timestamp, ByUserId, ForUserId")]Comment commentToCreate)
{
try
{
commentToCreate.ByUserId = userGuid;
commentToCreate.ForUserId = userGuid;
commentToCreate.StoryId = 2; // hard-coded for testing
_repository.CreateComment(commentToCreate);
return View();
}
catch
{
return View();
}
}
The answer is to use return RedirectToAction(). Using this enforces the PRG pattern and achieves my goal.
My earlier comment to my original post did cause an error, that I guess I'm still confused about, but this works:
return RedirectToAction("Details", "Steps", new { id = "2" });
I, and this is a personal opinion, think you've tackled this the wrong way.
Personally I would;
Create a view called ListStories.
Create a partial view that lists the
stories.
Create a partial view to create a
story.
When you want to add a story, simply
show the add story html.
Then when the user presses a button
you do a jQuery postback, add the
new story and return a PartialView
of either the new story or all the
stories.
If you return a partial view of all
stories then replace the bounding
div that contains all the stories
with the new data.
If you return only a single story
then append it to the end of the div
containing the stories.
I know this means a lot of re-work and it sounds complex and like a lot of work but doing it like this means greater flexibility later on because you can re-use the partial views or you can make a change once and all views using that partial view are now updated.
also, using jQuery means that the adding of stories looks seemless w/out any obvious post back which is nice.
Since the problem seems to be caching, you can simply disable/limit caching.
Add the following attribute to your actions:
[OutputCache(Duration = 0, VaryByParam = "none")]
This will tell the browser to cache the page, but for 0 seconds. When the post reloads the page, you should see the desired results.
The answer is to make sure your form action is properly set. If you have used renderaction and not set the form controller and action manually then the action will be the current URL.
Try:
<% using (Html.BeginForm("ActionName", "ControllerName")) {%>
Instead of:
<% using (Html.BeginForm()) {%>
I have the following ajax form tag:
When the form is submitted, the controller returns a partial with a full row to be inserted into the table (the same partial is also used to render the table in the first place).
The idea is that after the user edits an item, the item's row in the table will be replaced with the updated version from the partial. When I point UpdateTargetId to a <div> element it seems to work fine, but when I point it to a <tr> element, it doesn't.
Any help would be greatly appreciated.
I'm assuming that your partial actually renders the entire row. In that case, the default replacement semantics won't work for the <tr> element since you'll be inserting a new row into the existing row and get something like:
<tr><tr>...new contents</tr></tr>
You might want to look at changing the InsertionMode (I forget the other potential options) or having your partial generate just the row contents, i.e., the <td> elements instead of the row itself.
I ended up changing my approach. I changed the controller to return the values of the object in jason and had the view's js function simply update the content of the table row with the new values. Seems to work fine now.
Rich Strahl has an excellent post on how to do Client Templating with jQuery.