I am working on a mobile website in ASP.NET MVC3. I have a page where i have search bar in my header. this header is coming from my Layout page which is common to all other Views. And inside my specific page, I have page specific content(forms).
For my Customer/Add action, I return the Add View of Customer which is strongly typed to my CustomerViewModel. I will have form tag in my Add View which will be posted to HttpPost Add Action method when form gets submitted. That is fine. My question is how will i handle the search box content ? I believe only one form is allowed in the page.So if i have a SearchViewModel which is binded to my Search View(Partial), It is going to be 2 forms in my page. So i can not do that.
I can handle the search part by reading the content in java script and calling another action to get Search results.Is that the only way to do that ? I am worried about those devices where java script is disabled. What should i do ? Please advice
No. You can have more than 1 form on the page. In fact, here you should. Your Add Customer page should submit to 1 action method, but your search form should submit to a different action method.
If you are familiar with webforms, that framework only allows you to have 1 form on the page, but not because HTML requires it. Webforms requires it because it is the only way the framework can carry all of the data from various server controls across POST requests (using ViewState). Webforms has historically not been very HTML or HTTP friendly.
You just can't have forms nested within other forms in HTML, but it is completely legal (and recommended in MVC) to have more than 1 form on a page.
As for AJAX, I would not worry about devices that do not have javascript enabled. There are only like 6 or 7 people on the planet that don't have javascript on their web devices, and if someone disables javascript, they won't be able to experience 99% of the rest of the web anyhow.
Related
Recently I have started to deal with dynamic content in my RazorPages web application. I found out about AJAX and have started to incorporate it into my application since it helps me display information to the user. For example, when a user presses a button, some information is taken from an input field and sent to the server, as usual. I use the server response (OnGet or OnPost return value) to display information to the user without them reloading the page.
However, I cannot figure out how to incorporate model binding into this. When I use AJAX I can build the message myself but the model binder of RazorPages was made to this automatically - which is great and I use it a lot, but how can I access the return value of my OnGet or OnPost when I created a form and used tag helpers to allow model binding? I know that I can return Content(string) in these methods but that will show an empty page with the string I return, of course.
My question is: How can I access such a string to display it to the user? Am I even on the right track here or is there maybe a better way to solve this kind of issue?
I would recommend checking out some of the Razor Pages tutorials as they cover the basics of posting form data using Razor pages:
https://www.learnrazorpages.com/razor-pages/forms
Best of luck on your programming journey.
What is the best way to place 2 identical forms on the same page, but use the same form action and fields for each form? How can I keep response messages in the respective form area from which the data was submitted?
I'd have one form in the footer of my site, and one form in a popup on the home page of my site. I'm using a hidden div and Magnific to open the popup containing the same code from the form that is located at the footer. Essentially, both form do the same thing, and utilize the same form action.
I do not have access to the form action, or the code in the form action page.
Currently, the forms existing on the same "page" are no problem, but when I submit an email on one form, the errors and success messages show up on both the popup form as well as in the footer form.
I've read that this may be possible to do with ajax, but for completeness sake, I want to make sure that I'm building that I'm doing what I can with the form html, before moving on to studying ajax for this.
Sadly there is no nice html/liquid solution for this.
The only way is to use cookies in order to save information which form was submitted and show the error message only for that form instead of the two ones.
AJAX is not a good solution because of the Google Recaptch-a when you submit the form more than once, which is a real pain in the a** since there is no way to disable it and the form will fail if you try to submit it with ajax.
The easiest solution is to use cookies, other option is to rely on an APP for this, but it may be an overkill for this.
Forms in Shopify are... how to put it nicely... dumb... basic... not developer friendly or just not made to be tweaked in any sort of way ( excluding the front-end ).
I'm looking for a NodeJS MVC framework that allows rendering partial views on client side using Ajax (without whole page refreshing).
As far as I know, you can declare partial views on server with almost any Framework (Express, Sails...), but this will lead to refresh the whole page even if there's only a small portion of your page that really changes. This problem doesn't exist with a SPA Framework (this one would just load the partial html file in a container via ajax).
I believe Microsoft ASP.NET MVC was able to handle this case, by comparing the previous version of the page with the new requested page, and just returning the portion of the page that really changed. This may be time and CPU-consuming but it just works.
Is any Node MVC Framework managing a similar thing today ? Or is it mandatory to use an SPA Framework when a reactive user interface is required (without any whole page refresh) ?
Thanks in advance !
sails.js! It supports partials as you requested. You don't need to refresh the page, if you send ajax-request or handle the stuff via websockets dynamically.
I'm using microsoft ajax and ajax.beginform.
It's working great for model binding my partial view, but I need to conditionally disable some of the buttons in my form itself depending on what comes back from the server.
How can I go about this without using JQuery?
Have you thought instead about using two separate views instead, and have your conditional logic in your controller determine which view to display.
Let's say I have an Employee, and for the creation of such employee in my web application I want to follow the next flow.
Create <-> Verify -> Save
In the create page the user can set up a bunch of properties,
In the verify page the user is presented with two options "make changes" and "verify"
In the save page the user is presented with a confirmation page
I have two approaches to this:
Use Javascript to change "action" and "method" of the form.
Handle the logic on the action
(which feels kind of clunky at least
with asp.net mvc)
Which do you prefer ?
Is there a better way to do this?
Pretty easy in ASP.NET MVC. See these posts for guidance:
how to make a wizard with ASP.Net MVC
http://shouldersofgiants.co.uk/Blog/post/2009/09/16/A-RESTful-Wizard-Using-ASPNet-MVCe280a6-Perhaps.aspx
Personally, I would do it as a single GET/POST and utilize some basic jQuery to show/hide DIVs containing the necessary inputs as noted in the first link.
I would do this with routes
GET new to render the create form
POST new to show the verify form
POST create to actually create the resource
Create <-> Verify -> Save
It isn't clunky, Create is Get, verify is post of the same URL. The method that handles the Get and the one that does the post use the Same View, just with different info sent to it.
So for the create the view is instructed to post to the same Url, when u are already to verify it will post to the Save action.
The above works for any non js client. You can then hook some js, so instead of posting the form from Create -> Verify, you would change in the client side. This way it works for both js - non js versions. You can even display the Save confirmation with the same technique if you wanted. Progressive Js.