I am new to Stack Overflow and to ASP.NET MVC.
I have been asked to do a project where I want to use ASP.NET MVC, but I have some problems wrapping my head around it and I hope some of you could get me in the right direction.
The project is a kind of a search portal. On every page there is a dropdown box where you basicly select the dataset (it's based on books) you want to search. In the dropdown is the name of the book you want to search.
Of course there is also a search field. These 2 objects are on every page and has the same function on all pages, and I can't get these 2 objects to communicate.
I have these 2 in separate partialviews and want to generate an action for the search formfield something like this:
domain.com/{bookname}/search/{searchterm}: this is the thing created from the dropdown and the search box.
But can I do this in the searchfields partialview in some way, or do I have to grab these value in each controller?
I hope this makes any sense.
Create a partial view with your dropdown and textbox, using the BeginForm helper:
<% using(Html.BeginForm("Index", "Search")) %>
<% { %>
<%= Html.DropDownList("BookNames") %>
<%= Html.TextBox("SearchTerm") %>
<% } %>
Then in your SearchController's Index action, you should be able to grab the values from the form collection or using your dropdown's and textbox's id.
public ActionResult Index(FormCollection frmCollection)
{
// ...
// also you can redirect to another action/controller if you needed
// return RedirectToAction("...", "...");
}
or
public ActionResult Index(int bookNames, string searchTerm)
{
// ...
// also you can redirect to another action/controller if you needed
// return RedirectToAction("...", "...");
}
Hope this helps.
I have implemented a similar search requirement on one of my projects with ASP.NET MVC. However, I had the Dropdown and Search in a single Partial View.
I then used Javascript to pick up the selected values and redirect the user to the URL with pattern domain.com/{criteria}/search/{searchWord}.
This way I had to use a single controller to search, with a single view to view search results.
Related
I have an index view which return a list of data. The title parameter contains HTML tags. When I load this view, my title like that <strong>title</strong>.
But I don't need theses tags in this situation, so I'm trying to remove them only for this view. I have read that operation could be done in controller, could you tell me how to do that with HtmlAgilityPack ?
Controller
public ActionResult ArchivePanel(string sortOrder, string currentFilter,string searchString,int? page)
{
...
var alertMap = db.AlertMap.Include(a=>a.AlertLog).Include(a=>a.AlertMode).Include(a=>a.AlertPriority).Include(a=>a.AspNetUsers);
...
return View(alertMap.ToPagedList(pageNumber.pageSize));
}
I need to do this operation on a.AlertLog.AlertTitle value
View
<td>
#Html.DisplayFor(modelItem=>item.AlertLog.AlertTitle)
</td>
Thanks
I would advise you not to use the HtmlAgilityPack for this. This is for manipulating HTML, and in the controller you should not be changing the raw HTML.
Instead, I would suggest using a different view for your page in this situation, that had the look and feel you need in this context. You can factor out the parts of the view that are common with the original view into a shared layout.
I'm building an Asp.net mvc 3 application. What I want to do, is a profile page (pretty mutch like the stackoverflow profile page), and the content of this page will be splited in tabs, each tab is represented by an PartialView.
When the user click on the tab X, I want to refresh only the tab area, without refreshing all my page. And in the same time changing my URL adress, so if the user click on the browser refresh button, it refresh the page with the selected tab. Is this possible ?
What I already know, is how to get data using AJAX, and replace the content of my view. I've read this post , I found it interesting, but it refresh all the page.
Thanks in advance.
You are on the right track. You will need to use both ajax to get the html to render without refreshing the page, as well as use push state to update the URL to include the current tab.
You could do these things as separate operations, but I would suggest using PJAX. With PJAX you will need a little additional logic in your server to decide whether to return the full html page with the layout, or just return the partial (a PJAX request).
Here is our Foo controller. Index has a default selected tab of "Bar". The Bar and Baz actions return the Index view, but with different tabs being the selected tab. If it is a PJAX request, then all we need is the partial view that fills in the tab content.
public class FooController : Controller
{
public ActionResult Index()
{
ViewBag.SelectedTab = "Bar";
return View();
}
public ActionResult Bar()
{
if(Request.Headers["X-PJAX"] != null)
return PartialView();
ViewBag.SelectedTab = "Bar";
return View("Index");
}
public ActionResult Baz()
{
if (Request.Headers["X-PJAX"] != null)
return PartialView();
ViewBag.SelectedTab = "Baz";
return View("Index");
}
}
Inside of the Foo/Index.cshtml we have the Razor code that will determine what partial view to render based on ViewBag.SelectedTab.
#{
ViewBag.Title = "Foo";
}
<h2>Foo</h2>
<ul>
<li><a class="tabs" href="#Url.Action("Bar", "Foo")">Bar</a></li>
<li><a class="tabs" href="#Url.Action("Baz", "Foo")">Baz</a></li>
</ul>
<div id="tab_content">
#if(ViewBag.SelectedTab == "Bar")
{
#Html.Partial("Bar")
}
#if (ViewBag.SelectedTab == "Baz")
{
#Html.Partial("Baz")
}
</div>
#section scripts
{
<script type="text/javascript">
$(function() {
$(".tabs").pjax("#tab_content");
})
</script>
}
The script section at the end is how you wire up PJAX. You are telling it, for all hyperlinks with the tabs class use pjax to dynamically load and render the html resulting from the href into the container with the id tab_content and update the url in the browser to be the url from the href.
Each tab's partial view is fairly simple in this scenario
Bar.cshtml
<p>This is the Bar tab. No pun intended.</p>
Baz.cshtml
<p>This is the baz tab.</p>
This is obviously a very simplified solution. You typically would want to use a presentation model to handle the logic of the view. Also, I have intentionally left out any tab styling to demonstrate that this technique can be used on any type of link. It is not limited to only tabs.
The full source code for this example can be on my GitHub site.
When the user click on the tab X, I want to refresh only the tab area, without refreshing all my page. And in the same time changing my URL adress, so if the user click on the browser refresh button, it refresh the page with the selected tab. Is this possible ?
To accomplish this you need to plug into browser's history API (and it's part of HTML5, and you'll have to use some kind of plugin to get the same thing in browsers that does not support it).
Manning's "HTML5 for .net developers" has pretty good section on that, but it's still in "early access".
Hi
i want to do a work in asp.net using mvc and ajax
i have a button
when i click that button,its text should be changed.e.g before click(Click me) after click(u clicked me)
but i want to do this work in MVC2
i have studied but couldn't understood mvc
kinfly do this example so that i can understand it easily
Best Regards:
Shaahan
are u just trying to change the text label on click?
there's a few ways to do this, but you can probably just use an onclick event and change the label straight when the user click on the button.
for example like so.
but if you want to do it MVC just for the heck of it, then you can create a view, click on the button and do a form post to the same page, and on the controller use ViewData["ButtonLabel"] and update the button label when the page goes back :P
You can do what you want simply with javascript. If you want to learn mvc here a simple [music store][1] tutorial that I has helped me a lot! [1]: http://www.asp.net/mvc/tutorials/mvc-music-store-part-1
MVC stands for Model, View, Controller.
The way this works is you have a controller, say HomeController which is a class derived from Controller. When you access /Home/ on the site through your browser it serves the browser a view and any additional information, often cookies and such. The model is the data and logic of the program, often handling things like databases.
There are multiple ways to go about this example.
//In HomeController class
public ActionResult Index()
{
return View();
}
public ActionResult Clicked()
{
return View()
}
And then for the Views for the index view you'd have a button which would link to /Home/Clicked. Then on the clicked view you'd have the button with changed text.
Of course this is only one way to do it you could just append a number do the /Home/ url and pass that to the view and if it's not 0 have the test be different or use javascript to change the button's text
Index view:
<form>
<input type="button" value="NClicked" onclick="window.location.href='/Home/Clicked'">
</form>
Clicked view:
<form>
<input type="button" value="Clicked" onclick="window.location.href='/Home/'">
</form>
Of course there's more to the views than that, but you can insert that into your body.
I'm trying to get into MVC and currently reading the wrox professional ASP.NET MVC book.
I kind of get it so far. Instead of each URL going to a page it goes to a controller. The controller action then gets the data and decides what view to use.
I also understand that if I have a url like/product.aspx?id=100 then the controller would get the product details and merge them with the "show product" view.
Now here's the bit I don't get...
If my product page has other stuff on it, like a login box, a "top 10 products" section, list of categories etc. which may or not be used on other pages too then how would I include them and keep their code separate?
In the classic aspx model it would be simple. If my top 10 products appeared on every page then I would put it in a master page, but more likely I would make it into a user control if it was going to be used on some pages not others.
From what I understand of MVC so far, my products controller would have to get the top 10 products and so would any other controller that was producing a page with the top 10 products on it.
Confused. Please help.
From what I understand of MVC so far,
my products controller would have to
get the top 10 products and so would
any other controller that was
producing a page with the top 10
products on it.
Not necessarily. You can use Master pages with MVC, as well as Partials to compartmentalize re-usable view content.
This is a good article on using Partials.
http://jeffreypalermo.com/blog/asp-net-mvc-and-the-templated-partial-view-death-to-ascx/
Also, in your Top 10 products example, you could have that rendered by a child action:
[ChildActionOnly]
public ActionResult GetTopTenProducts()
{
var products = db.GetTopProducts(10);
return View(products);
}
You would then have a partial view (.ascx) called "GetTopProducts.ascx" that would be rendered when you call the GetTopTenProducts() action. Then in your Master page, or anywhere you wanted that Top 10 list to show up, you would call it like this:
<% Html.RenderAction("GetTopTenProducts") %>
You're close.
You're just forgetting that your controller is a class that can inherit from a base class.
You can create a base controller class that handles retrieving the top ten products, and then have any controllers that need that functionality inherit from the base class.
You then create a Master Page that uses a Partial View to render the top ten products passed to the View (from the base controller).
...and voila! No code repetition.
Please don't forget that in ASP.NET MVC you still can use MasterPage. With specific to ASP.NET MVC 2 you can display those 10 products using RenderAction which can render Action from any Controller you select.
In addition to that, you should get to know PartialView as well.
You can use master pages and in MVC partial views are synonymous with user controls. The difference being master page does not have a corresponding controller. You an solve with one of two ways.
When you use a partial view you can
pass a model in.
<%= Html.RenderPartial("PartialView",Model) %>
You can just do the work in the partial view, utilizing the code brackets <% %>.
I have the following scenario:
1) A phone book table
2) Multiple ways of searching through the table (first name, last name)
3) There is also the obligatory paging (page size and page number) as well as sorting
When the user accesses the page first the Url is simply /Phonebook. Now let's say the user is searching for "abc", then the Url becomes /Phonebook?q=abc. Then he is sorting ascending by first name, and the Url should become /Phonebook?q=abc&sort=firstName&order=asc.
The problem I have is how do I program my view to automatically append/modify the query string so that it still contains previously entered constraints (as in my "abc") query but adjusts/adds new constraints for example if sorting, and then paging etc. is used?
I'd hate to use JS and rewriting the location for this, and rather have the page generate real anchors (a href) after every postback for each sort/page/filter link on my page.
Appreciate your time folks :)
I assume you have some sort of controls on the page to set what will be sorted, in what order and obviously a way to define what will filtered?
When you load the page, why not set those values in the view and then the controller should update correctly on the next load? That way it is easy for the user to change them as well without needing to touch the URL. In this case it is straight forward passing the data from the controller to the view and setting the values as you would any other control, for instance:
<input type="text" name="search" value="<%= (string)ViewData["Search"] %>" />
If you really need it in the URL, you can modify the button by passing the extra parameters in an anonymous type.
For a link something like this:
<%= Url.Action("Search", "PhoneBook", new {order="asc"}) %>
For a form (since you don't specifically set a submit button) something like this
<% using (Html.BeginForm(new {order="asc"}) {
You could pull those from the controller by doing something like
<% using (Html.BeginForm(new { sort=(string)ViewData["Sort Order"] }))
Just pass extra parameters in with an anonymous object:
<%= Html.ActionLink("Sort ascending", "Search", "PhoneBook", new {order="asc"}) %>
<!-- or -->
<%= Url.Action("Search", "PhoneBook", new {order="asc"}) %>
If the extra parameters are not defined in the route, they will be added as query strings.