how to use aspx menu functionality in ASP.NET MVC3. So that clicking on the menu item will poplulate the gridview.
ASP.NET MVC Does not have any Server controls like what we have in ASP.NET WebForms. It is all about writing pure HTML code by hand. ( All the server controls in Webforms also generates HTML and render to browser)
What you can do is, Have a tags for your menu item. Then on click, you can call another action method which loads all the data you want to show in the tabular format. If these menus are going to be in all pages, you can keep them inside the _layout.cshtml which will act like a Master page.
IF you want to load some data to the Table(UI) without a page reload, you can do it with jQuery ajax.
Assuming you have some markuplike this for your Menu, The below code loads response from your Action methods using the jQuery load function.
//Don't forget to include jQuery library
<ul>
<li>#Html.ActionLink("Users","List","Users",null,new {#class="ajaXMenu"})</li>
<li>#Html.ActionLink("Jobs","List","Jobs",null,new {#class="ajaXMenu"})</li>
</ul>
<div id="contentDiv"></div>
<script type="text/javascript>
$(function(){
$("a.ajaXMenu").click(function(e){
e.preventDefault();
$("#contentDiv").load($(this).attr("href"));
});
});
</script>
first you'll probably want to look into something like sitemaps for MVC, which there is a really good open source option:
https://github.com/maartenba/MvcSiteMapProvider
Then you'll want the actual menu. There is no MVC menu control, so you'll have to either create one yourself, or use someone else's. Twitter bootstrap has a nav menu that is fairly good:
http://twitter.github.com/bootstrap/components.html#navbar
Additionally, telerik has a menu that you can use as well, but this one you need a license for:
http://demos.kendoui.com/web/menu/index.html
Related
i've got an issue.
I'm a newbie in the world of jQuery Mobile, and with the ASP.Net MVC part I'm a little bit lost.
Here is my problem: In my mobile web site I want to change the navbar (that I use more like an appbar) buttons whereas I am on an Edit Page, or Home, etc....
So those pages (Edit, Show) are loaded in ajax, and on these pages I'm trying to fire an event like :
$(document).ready(function(){
alert("Hello !");
});
But after some researchs, i found that in JQM with Ajax, events doesn't work that way, but more like this :
$(document).bind('pageinit', function(){
alert("Hello !");
});
But this don't work for me (every page change the event is trigerred), maybe because in ASP.Net MVC Mobile we have only one data-role="page" and the rest of the content are loaded in ajax in the data-role="content", so I really don't know how I can fire an event when my "Ajax Loaded Kind of Page" is loaded ?
I had tried to live/bind on the listview of one of these pages but that does not work either :
$("[data-role='listview']").live('pageinit', function () {
alert("hello");
});
To be more precise about what i'm trying to do :
In ASP.Net MVC, my layout (who his common to all my pages) has a div with a data-role="page"attribute. This data-role is unique to my all app, and need to deal with it.
But the fact is, when I load an other ASP.Net MVC Page in my code :
<div data-role="page" >
<div data-role="content"> Here my ASP.Net MVC Page</div>
</div>
I cannot use the $(document).bind('pagenit') because i don' load a page (data-role=page) but just a part of a data-role="content".
If you have any idea I will be glad to hear (more read) it, thanks in advance and sorry if my english is not really "understandable".
Jquery Mobile gets the view through the AJAX and displays it. Due to this, the general events miss out since it is an AJAX call.
The best option is to disable Ajax for every form, you need to mention on each redirection call as well
data_ajax = "false"
Once it becomes a regular call, all Jquery events work normally!
I am new to web development..
i have created views using Entity Framework in MVC3 Razor..
What i have done yet is,
i 1st created model(Clients) and DbContext(ClientDbContext) Classes.
then, i add controller with scaffolfind options
Template: Controller with read/Write actions and View, Using Entity Framework
Model Class: Clients
Data Context Class : ClientDbContext
Views : Razor(CSHTML)
It Creates the controller class and index, Detail, Delete, Delete Views...
After that i modified the index page for search and pagination...
All are working good...
in the index page i have create, edit, delete, detail links...
When i click the links browser loads to that page and working good...
But i need to popup those views when i click the links in the index page...
i don't know how to do this... i studied many articles but i am confused...
Please help me to solve this with an efficient manner...
Thanks in advance...
Creating a model pop-up within a page isn't something that can be done directly with ASP.NET MVC. You could do it yourself using javascript & css but I would strongly recommend using a JS UI framework to do this. jQuery UI has a pop-up modal box, except they call it a dialog.
The docs for jQuery UI's dialog can be found here. Have a look through the examples to see the fine details of how to set it up. But this is the basic flow of what you need to do:
Download the jQuery UI files needed and include them on your page (CSS/JS files)
Take the html from your create/update/delete views and put it on your index page, wrap them in a div with an appropriate id
When the page loads use jquery ui to target your div's you want to be a popup
Things such as the link you want to make a dialog popup is set by passing options to the dialog initialize method, again the exact options and examples can be found on the docs page.
Refer this : http://jqueryui.com/dialog/ to create a jQuery Dialog box.
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog">
#using(Html.BeginForm()){
#Html.EditorForModel()
<input type='submit' value ='Submit'/>
}
</div>
I am new to AJAX,
I want to have a javascript that will make all the link(include webpage,internal link, external link) load in a lightbox when clicked. Just like Facebook, when you click the photo, it will give you a frame , without redirect you to the photo page.
Overall, I want my user to click on ANY link of my website do not redirect to a new page which need to refresh the whole page.
I want the link to be load in a frame on demand, also know as AJAX right?
Actually I just want to know this technique is called as what?? Any google search term ?? searching queries??
Any recommend article or tutorial to do this?
AJAX: Asynchronous JavaScript and XML. Your example isn't AJAX, but rather it's using JavaScript to do event binding that causes actions to take place in response to events made by the user in the browser.
You could use jQuery to bind an event to all the links of a certain type on a page. The exact implementation will depend on your HTML markup.
If, for example, you have several images wrapped in link tags:
<img src="image1.jpg" />
<img src="image2.jpg" />
You could have jQuery similar to the following (be sure to load jQuery prior to this in the page):
<script>
$('.image_link').click(function(event) {
event.preventDefault(); // stops it from doing normal link action
// and then down here you'd need JS for your lightbox library
});
</script>
Smashing Magazine has an article that might help you: Modal Windows in Modern Web Design.
I want to call a html page on click of a button in mvc.
Is there any way to call a normal html page from mvc3?
Use an anchor tag in your view, as you usually would:
Click Me
Then your button should look like:
Click me
I'm creating a site where I don't want anything to be done via custom javascript/jquery code at all, and I'm not sure it's going to be possible so need some advice.
The things that I want to be able to do are:
Load a JQuery (or Jquery style) dialog box containing a partial view.
Have a button that will select the "SelectedValue" from a dropdown list and render a partial view. (e.g. select a user from a dropdown and then click a button to add them to a list)
Append a partial view to an existing div.
I'm sure that all the above can be done using custom javascript, but what I want to is to use the standard Ajax and Html helpers that come with MVC3.
Main reason is that I've been struggling to get to grips with jQuery, but I also thought it would be nice to see if it can all be done without having to add a new script to the site.
As always, any help is greatly appreciated (even if it's just pointing me to articles).
The standard Ajax and Html helpers that come with MVC3 are for handling server-side stuff. Even the #Html.ValidationMessageFor helper usually uses their unobtrusive validation lib for jQuery validate.
Keep trying at jQuery, you'll get it. There is a reason it is so popular!
Update
I believe you can do #3 using #Ajax.ActionLink, but don't think you can do 1 or 2 out of the box with the Ajax html helper.
It seems that you can use the Ajax.BeginForm method to do this.
There are issues with the fact that it has been in a separate form as I can't nest the forms though.