I'd like to create a wizard in ASP.NET MVC similar to the wizard control functionality found in ASP.NET webforms.
What is the best way to do this?
With ASP.NET MVC I would suggest using javascript/jquery to create a wizard in a web page; something like
<script type="text/javascript">
$().ready(InitializeWizard);
function InitializeWizard() {
$(".step").hide();
$("#step1").show();
}
function Step1OK() {
$("#step1").hide();
$("#step2").show();
}
function Step2OK() {
$("#step2").hide();
$("#stepComplete").show();
}
</script>
<div id="step1" class="step">
Step 1
<input type="button" onclick="Step1OK();" value="OK" />
</div>
<div id="step2" class="step">
Step 2
<input type="button" onclick="Step2OK();" value="OK" />
</div>
<div id="stepComplete" class="step">
Complete
</div>
NB! Remember, in the top of the document, to load jquery, e.g. by referencing the google link:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
</script>
There is no simple way to use a wizard control in ASP.NET MVC. Because ASP.NET MVC is not Web forms, so you should stop thinking webformy and start thinking the MVC way. A better thing to do would be to leverage jQuery and partials (Partial Views) to come up with a nice user experience which walks the user through some predefined steps.
ASP.NET MVC itself is a stateless design pattern meaning between requests there is no form of state. If you would like to hold some sort of state you would have to use some sort of persistant mechanism like a cookie, querystring (blah?page=2), session or maybe even in the database.
Try this one.
It uses jQuery and contains a sample project.
You can use the simple component MVCWizard.Wizard available on NuGet.
The WizardController allows you to create a wizard using partial view.
There is also the AutoWizardController that renders the entire wizard in a single view.
All these components operate with the session to store the model state.
Related
I am working on a corporate ASP.NET MVC 5 website that has 159 *.cshtml View pages.
I am trying to incorporate a Wait Cursor to display whenever a query is run.
Some pages have queries that are called with jQuery/Ajax calls:
$.get("#Url.Action("SomeQuery", "ControllerN"));`
By adding the below div tag and jQuery to the Shared_ConsoleLayout.cshtml file, the Wait Cursor will show and hide anytime jQuery makes one of the Ajax calls:
<div id="waitDiv" style="position:fixed; top: 50%; left: 50%">
<p style="text-align: center">
Loading...<br />
<img src="~/Images/wait.gif" /><br />
Please Wait.
</p>
</div>
...
$(document).ready(function () {
$('#waitDiv').hide();
$(document).ajaxStart(function () {
$('#waitDiv').show();
})
$(document).ajaxStop(function () {
$('#waitDiv').hide();
});
});
But, I don't know how to show and hide the div using the ASP.NET MVC 5 Html.BeginForm syntax, and they account for over 90% of the calls on the corporate website.
#using (Html.BeginForm("SomeQuery", "ControllerN", FormMethod.Post))`
What can I do to allow the Wait Cursor to show and hide with the ASP.NET MVC 5 Html.BeginForm techniques?
The Html.BeginForm is just a syntax wrapper on the "form" tag. Submitting a form operates synchronously, and there are no such events. You can handle the submit event to show some indicator, which will be automatically hidden (overridden) within a new page HTML.
If you need to implement asynchronous data posting, you can modify your existing jQuery code - for example, use the jQuery ajax plugin instead and specify the request data manually (I guess this is why you are looking for a form usage). Otherwise, use the Ajax.BeginForm instead, which have the necessary events (similar to the jQuery get/ajax plugin): How to use Simple Ajax Beginform in Asp.net MVC 4?
i am new in MVC and try to learning through googling & online tutorial.
i search Form binding with Model sample in MVC and got many sample code but i am not getting a sample code for a complete form where all kind of html controls are used like
checkbox
radiobutton
listbox control
drodownlist
textarea
hiddenfields
checkboxlist
radiobuttonlist etc
and all controls should be bind through model with server side and client side both kind of validation. form should have two textbox one dropdown, 3 checkboxes and 2 radio button, one listbox control and if possible provide guide line to work with checkboxlist & radiolist.
if anyone knows that kind of url then plzz inform me or if possible please give me a sample code of a complete form where all the above controls will be there with model binding and validation. thanks
in the Views there is a helper called Html you can use it in the view like #Html
there are all things that you wanted, for example
#Html.HiddenFor
#Html.RadioButtonFor
#Html.TextAreaFor
and so on
search for asp.net mvc Html helpers
another smaple
#Html.CheckBox("sameName")
#Html.CheckBox("sameName")
#Html.CheckBox("sameName")
#Html.CheckBox("sameName")
it will produce this html
<input type="checkbox" name="sameName" />
<input type="checkbox" name="sameName" />
<input type="checkbox" name="sameName" />
<input type="checkbox" name="sameName" />
take a look at this website
Have a look here:
It Explains,
Rendering a Form in ASP.NET MVC Using HTML Helpers
http://msdn.microsoft.com/en-us/library/dd410596%28v=vs.100%29.aspx
http://stephenwalther.com/archive/2009/03/03/chapter-6-understanding-html-helpers
I am working in asp.net application, adding functionalities like form elements, validation and populating data from DB.
I can use ASP: controls but I am wondering is it possible to use HTML.TextBox or <input type="text">
If I can use <input type="text" or Html.TextBox what are the pros and cons of using them versus using
Forget about server side controls in ASP.NET MVC. Everything containing runat="server" is a big NO in ASP.NET MVC. Won't work in Razor anyways. There are no pros and cons. Server side controls should never be used so there's nothing to compare. Simply use HTML helpers such as Html.EditorFor and Html.TextBoxFor.
If you're using ASP.NET MVC, then either the manual typing (<input type="text" />) or the helper extension (Html.TextBoxFor(x => x.SomeProperty)) are going to be your best bet, and it really depends on what you are planning on doing. If the control you are making has no property on your element, it can be a lot easier to simply hand code the input tag.
Never use <asp:Checkbox ID="blah" runat="server" /> in an MVC application.
I'm trying to add some Model properties into my JavaScript within my content page:
$(document).ready(function () {
createPager(1, <%=Model.TotalPages %>);
createUnprocessedPager(1, <%=Model.TotalUnprocessedPages %>);
});
Does anyone know if this is by design? Are you not meant to combine Model properties with JavaScript? Or is this a bug?
This works as expected. However, I do not have any Intellisense within the <% ... %> tags when actually writing the code. If I write any code within <script> tags, then there's no Intellisense. If I go directly under the tag </script> and type <% Model.... %> then boom, I have Intellisense again.
UPDATE: 22/10/2010
Just read Scott Guthrie's latest blog post and it appears this functionality is coming out soon with the up coming release of ASP.Net MVC 3 (possibly for the beta as well):
Note: Visual Studio Code/Markup
Intellisense and Colorization within
Razor files aren’t enabled yet with
the Beta earlier this month. You’ll
see this show up in a few weeks though
– and it will support full code
intellisense for HTML, JavaScript, CSS
and C#/VB code within Razor files.
There is also no syntax highlighting I think. Not sure if that's a bug or a feature, but AFAIK, combining the code this way isn't a good practice. Generally inline javascript is not a good practice, but if you go with it, combine Model properties with it, and later decide to extract the scripts into a separate js file, your code will break. Therefore, it is quite common to populate hidden fields with your Model properties and read them in your js with jQuery, e.g.:
<input type="hidden" id="valTotalPages" value="<%=Model.TotalPages %>" />
<input type="hidden" id="valTotalUnprocessedPages" value="<%=Model.TotalUnprocessedPages %>" />
...
// in js
$(document).ready(function () {
createPager(1, $("#valTotalPages").val());
createUnprocessedPager(1, $("#valTotalUnprocessedPages").val());
});
So lack of syntax highlighting and intellisense might be a bug, but might as well be a way of discouraging certain code patterns.
You will loose you Intellisense in the views inside quotes "" like attributes.
<input type="text" value="<%= DateTime.Today.ToShortDateString() %>" />
or if it appears inside of Javascript blocks.
<script type="text/javascript">
<%= DateTime.Today.ToShortDateString() %>
</script>
It is my opinion that there should be Intellisense in these scenarios, so I would say it is a bug and hope future updates to Visual Studio will address and resolve this.
I am using Ajax.BeginForm in ASP.NET MVC to post a form. I have one div being updated using AjaxOption's UpdateTargetId property. Now I need the post to update 2 Divs. I also need to return 2 different views.
Here is the code that I have presently:
<%using(Ajax.BeginForm("Create", new { controller = "View"},new AjaxOptions { UpdateTargetId = "view_tabs" })){ %>
<%= Html.TextBox("viewName") %>
<input type="submit" value="Create a New View" /><br />
<%} %>
Or maybe, the form's submit action should post to one controller returning a view and also make a get request to another controller that returns another view?!!
How do I achieve this using the MVC framework? I don't want to use JQuery or other Javascript libs.
I don't want to use JQuery or other Javascript libs.
Do you have an issue qith jQuery? Because it really is an amazingly great framework. To the best of my knowledge the ASP.NET MVC AJAX is quite limited in it's capabilities, but you can possibly directly use the ASP.NET AJAX libraries?
I do suggest giving jQuery a chance though.