I am on a C# .NET MVC project, and have a form that can dynamically add/remove n number of complex objects in a list. This complex object, for example represents a Person. This person has FirstName and Address properties.
When the user loads the page, all the People in the system are displayed in a list. When the user presses the 'add' button, two new text boxes show up for the Person's FirstName and Address properties. When the user presses the submit button, it will make a POST request to the server.
I know that you can write regular html in the View, and can use Javascript to add the new DOM elements for the FirstName and Address properties.
And with regards to when the user submits, I can use javascript to scrape all the data in the screen, and send a POST request to the server. Theoretically, another method is instead of using javascript, just make the button submit the form to the POST action of the controller; if I give my DOM elements the proper name attribute, the Action should recognize the data.
However, is there a MVC way of doing this? Maybe, with the help of Razor Helpers?
I am not sure what you are asking here; is it how to remove and add lists to your table or is it how to make a post?
I'll try to answer both:
1: Post without javascript:
Your assumption that you can post by naming the properties is correct! However, the page will have to reload if you want the new person in your table. Reading your description, I don't think this is really what you are looking for.
2: Add a row without javascript:
This cannot be done. You need javascript for this or a javascript framework which uses data-binding (there are a lot)
I would strongly advise you to make a decision on if a page reload is a deal-breaker or not for your solution. If it is, try to solve your issue with jQuery or better yet: investigate in javascript frameworks which use data-binding (knockoutjs, angular, react, etc...). There is a learning curve to these frameworks but they make your developer life so much easier and increase the maintainability of your code.
Related
I need to create a "speed bump" that issues a warning whenever a user clicks on a link that would direct them to a different website (not on the domain). Is there any way to create a custom Orchard workflow activity that will activate whenever a link on the website is clicked? I'm having a problem getting C# to fire an event whenever a link (or anchor tag) on the page gets clicked (I can't just add an onServerClick event to every anchor tag or add an event handler to anchor tags with specific IDs because I need it to fire on all anchor tags many of which are dynamically assigned an id when created).
Another option I was toying with would be to create a custom workflow task that will search any content item for links and then add a speedbump to any link that is determined to lead to an external url. Is it possible to use C# to search the contents of any content item upon creation/publish for anchor tags and then alter the tag somehow to include a speedbump?
As a side note I also need to be able to whitelist urls so a third party can't use the speedbump to direct the user to a malicious website.
I've been stumped on this for quite some time any help would be greatly appreciated.
One way to do this is to add a bit of client-side script to intercept the A tags click events and handle them according to the logic you want to implement. Advantages are performance and ease of implementation. Very, very few people disable javascript, and those users who do can presumably read a domain name in the address bar, so there are no downsides.
Another way, if you don't want to use javascript, is to write a server-side filter that parses the response being output, finds all A tags, and replaces their URL on the fly with the URL of a special controller, with the actual URL being passed as a querystring parameter. Drawbacks of this method is that it's going to be an important drag on the performance of the server, and it's going to be hard to write.
But the best way to solve the issue, by far, for you and your users, is to convince your legal department that this is an extremely bad idea and that there is, in reality, no legal issue here (but I may be wrong about this: not a lawyer (this is not legal advice)).
I have repeater control in which i am binding data from sql server database, Now i have number of records showing on my page but i want that i can filter my records according to dropdown selected. I need 4-5 dropdowns control thats depend on my need and i don't want my page to refresh while filtering.
Below is the example, this website using checkboxes too but i need only dropdowns...
http://www.phonearena.com/phones/full#/phones/full/
Give me any idea how to start, i think ajax is the thing i need. Suggest some examples if you have.
Ajax is the right solution.
Personally i suggest you jquerytemplate and ajax call few row code to achive your goal you may find more info here Load JSON data using the dropdown menu and refresh the div area with the new results in a web site
It is a good point to start and you can make more stuff with this logic :) really simple and fluid code :)
I would suggest you to use a client-side framework (so in JavaScript) like AngularJS, BackboneJS or KnockoutJS. They all provide ways to work with collections in JavaScript (like filtering in this case). You won't need Ajax excepted for the first load or if you want to do some paging. And because it's all client-side it will be far more fluid than re-downloading at every criteria change.
I am making some changes to already existing ASP.NET MVC 1 app where there is a form with a dropdown list that has all 50 states hard coded into the HTML. After filling out the form the user can later go back and edit their information. I want to make it so that on the edit screen the value that is already in the DB gets the "selected" attribute for the state. The only way I can think to do this is to build the html on the server and send it down to the view, is there a better practice?
No, View is the only place where you should generate the markup.
My suggestion is to write a JavaScript snippet like this:
$(function(){
$('#dropDownId').val(#Model.SelectedValue);
});
It's effective, easy, maintainable, and of course, fast.
I have a page with a lot of dynamically generated check boxes on it. As the users click these check boxes a lot of content on the page changes dynamically via ajax. The end users are complaining that after hitting submit and then hitting the back button to change something, their selections are blown away and they have to do it all over again.
I have seen a few sites (gmail, facebook, etc...) use the hash symbol in the URL to hack the back button so that it performs AJAX calls instead of going back to the previous full page request. I would like to do this to modify the URL before the page submits so that hitting the back button will load their previously selected fields.
For instance:
In Gmail if I am viewing my inbox then my URL looks like this: https://mail.google.com/mail/?shva=1#inbox
Then if I click "Sent Mail" an AJAX call is performed and my URL is modified to look like this: https://mail.google.com/mail/?shva=1#sent
I really like this behavior and want to duplicate it. How is this accomplished?
Do your links actually trigger any javascript or do they just link to the URL with the appropriate hash symbol information?
How do you read in the hash symbol info in javascript?
How does this type of navigation affect search engines? Would a search engine know that two URLS that are the same except for the information after the hash are actually different URLs and index them as such?
What are some other pros and cons of this technique that I should take into consideration?
NOTE: I am using C# with ASP.NET Web Forms and ASP.NET MVC 3.0 in case that matters at all.
To manipulate hashtags, look at location.hash (javascript).
You'll also be interested in the new push/pop state stuff in HTML 5. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history.
github has done some pretty cool things with this. Check out their blog entry on their tree slider feature at https://github.com/blog/760-the-tree-slider.
There's also the jQuery history plugin at http://tkyk.github.com/jquery-history-plugin/. (EDIT: I see Joe beat me to this one).
take a look at the jquery history plugin http://tkyk.github.com/jquery-history-plugin/ I have used it in the past, and it just might do what you want.
JQuery plugin:
http://tkyk.github.com/jquery-history-plugin/
Another jQuery library that I have used in the past:
jQuery BBQ: Back Button & Query Library
Also, a more scaled down version of the previous if you don't need all it's features and just gives you the hashchange event for all browsers:
jQuery hashchange event
NOTE: Just as a brief intro to the above libraries. The hashchange event is supported natively by newer(HTML5 supported) browsers in which case the scripts will just bind to that event. For older browsers that don't support that event, the script creates a polling loop to simulate the event. In either case you can bind to the event and handle appropriately.
EDIT: To answer your questions:
The links do not trigger javascript, links simply change the url with the hash. The hashchange event monitors this action, and when the hash changes(which is logged in browser history stack) the event fires.
location.hash is used to read the hash value, and any appropriate parsing you would need from that point.
Probably not SEO savvy enough to give you a complete answer on that, but fairly sure search engines DO NOT index hashes.
Pros for this technique is usability as your users will be able to properly use their back buttons. Also any history.back(0) javascript calls will also work properly(i don't like them but people use them). Cons are that as you're initially developing, you can get some quirky bugs depending on how your code is written. All in all though, I think with the use of the plugins much of the legwork has been taken out of the process and it is a great method for usability purposes.
A similar question was asked here in storing information in a given html element.
I'm still green to jQuery, but I'm looking for the best way to store information on the page. I have a Repeater that holds one image per item. These images are clickable and can fire a given jQuery event. The issue I'm having is, the objects that the Repeater is bound to holds some specific information(such as "Subtext", "LargerImage", etc) which I would like to be accessible from the page.
Core/Data in jQuery accomplishes this just fine, however we would still need to build the jQuery statement from C#, as all the data is stored on the server. To clarify a bit, this is storing information on the page from a database, which is a bit different than arbitrary information being made available through jQuery.
I'm not restricting this question to "how to bind a custom attribute to an element", because I did come across an idea of generating a JS Struct from the C# codebehind to store information, but I'm avoiding any code generating code scenarios(or trying to).
Custom Attributes from HTML5(ie, "data-subtext") are also a possibility as I can easily add those from the itemdatabound event:
sampleImageElement.Attributes.Add("data-subtext", "And this what the image is about");
I'm a bit confused on browser support for this specific attribute though, or if it is even best practice so early in the game. If custom attributes are the way to go, that's an easy change to make happen. If jQuery can accomplish the same, I'd love to be pointed that way at least for my own understanding.
Any thoughts are greatly appreciated.
I'm answering this question only for the record keeping purposes of stackoverflow, as this is the solution I've moved forward with for this scenario. An AJAX call is completely warranted for any larger datasets and is a direction I would definitely go otherwise.
I went ahead with the "data-" field in the HTML5 spec, provided by the jQuery meta-data plugin.
I'm wrote a short extension method on the Web.UI.AttributeCollection class called "AddMetaData", which accepts an IList as well as a string "Key" to ease the attachment to a given page element.
I'm not marking this as the answer just yet, as there might be some community feedback on my own direction.
To clarify what happens in ASP.NET, once the page is served to the client, the objects that the Repeater is bound to on the server are destroyed and are then recreated upon each page postback.
It sounds like you want to achieve some kind of tooltip effect where the contents are retrieved from the server through AJAX? There are numerous different tooltip options available
jQuery Tooltip plugin
Random.Next()'s jQuery AJAX tooltip
dhtml goodies AJAX tooltip
clueTip
that can be used to do this. You could then set up a webservice or page method to retrieve the relevant data from your datasource.
Of course, you could have the content rendered in the HTML sent to the client when the request is processed and simply hide this markup. Then write your own plugin to display the markup in the form you require.