I need to use a static html page as an MVC3 razor masterpage.
It needs to be able to inject the controller's razor-built view into a specified span tag on the static html page.
How do i go about:
Load the static html
Parse the static html string to the point where i need to inject the razor-view
Inject the razor view.
Here's the reason why-- a client of ours wants to be able to publish static html (daily) from their CMS and have the application pick up on the "template" and use it for they dynamic sections of their site. They do not have any understanding of .NET and MVC3 and I can not have them interacting in any way with .NET and such.
Any ideas?
Thanks.
Assuming you only need to inject your view into one part of the HTML, you can chop the HTML into "before" and "after" pieces. Create a Layout.cshtml that has "before", "middle", and "after" sections. before & after are the parts you parsed from the .html, and middle is the result from your Razor view.
Static pages aren't executed by the server, so if the requirement is to import a dynamic page into a static page, your best bet will be to use an iframe or javascript to place the generated html from the mvc3 site on the page.
You can do this using jQuery pretty easily:
$(function() {
$("#ContentFromMVCSite").load("http://mysite.com/url/to/mvc/view");
});
<div id="ContentFromMVCSite"></div>
This code will download the html output from the mvc site and place it inside the div. For more information see the documentation.
Related
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>
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
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.
Im unsure of how to approach this, should I have the html to be loaded hidden or load it from somewhere? I want to load a form in one page, and dynamic content on other pages.
The form can be saved to mongo db, and when the page loads should load the data into that form from mongo db.
Where does the html live for all the pages? I want to have a clean html5 document with lets say a content div. all content goes into that block.
Server running Django
Im want to use backbone.js for the app
any help would be appreciated
The initial page should include the basic layout of the application (header, content, sidebar, different placeholder for your views, etc.)
Then you load the application (usually with a controller) and render the different view that will replace the placeholders you had in your layout.
To render the views, I suggest to use a templating engine. With backbone.js there is already underscore.js on the page, so you can use the templating engine included (http://documentcloud.github.com/underscore/#template). You then have to load the template on the page. The easiest way is to create include a script element on the page with your template inside:
<script type="text/template" name="template1">
your template here...
</script>
And you can load it using this:
var template = _.template( jQuery("script[name=template1]").text() )
and execute with your data
var html = template(model)
You build your page with different backbone views using different template.
I hope that help!
I want to specify (in one place) a default layout page in Razor, so that I can delete this:
#{ LayoutPage = "~/Views/Shared/_Layout.cshtml"; }
from every .cshtml file I have. But I don't know how... Any ideas? I'm using Razor engine from ASP.NET MVC 3 Preview 1.
Create a "~/Views/_ViewStart.cshtml" page and the following inside:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Note that you can write code in here, so it is possible to change your layout based on the type of device targeted, etc.
This is now created by default in an empty MVC3 project.
Source
It looks like the way to do this is by using a _init.cshtml file in the root of the view directory in which you would like a common page element (header). When the Razor view engine builds your page it looks for a few specific files automatically called _start.cshtml, _init.cshtml, and _end.cshtml; these files are loaded in respective order by the view engine for every request. Placing the LayoutPage definition, and/or other common initialization operations in these files will ensure they're run for all pages.
Note: I'm not sure if the effect is passed down into sub-directories as it wasn't clear from the documentation; you'll have to give it a try and find out.
There's quite a bit more detailed information on how to do this found in the Microsoft how-to book on building pages with Razor. I found the section Running Code Before and After Files in a Folder on page 169. Check this Microsoft download page for the full book as well as additional Razor samples.
There is no easy way to do this in MVC 3 Preview 1. This is a limitation of the preview bits that will be addressed in upcoming releases. Unfortunately _init.cshtml files do not work in this preview of MVC3 so you cannot follow the Web Pages pattern.
There are 2 ways I can think of to make it work (though neither is optimal)
write your own page base class that derives from WebViewPage and sets the right Layout in the constructor... but in that case you would have to specify an #inherits directive in every view.
set the layout override in your action method (using the View(string viewName, string masterName) override). You could write an intermediate controller base class that would have a helper method to save yourself the trouble of repeating the layout everywhere.