How to dynamically add Html helper controls for same model attribute - javascript

I am using ASP.NET MVC 5.
My idea is to have modal view like on the picture.
When I click on "Add" I would like to add dropdownlist with same items inside like the others before. (Dynamically adding Html helper controls) At the end when I have selected values I would like to put strings together and send then to one string argument in POST method.
So in example if I have Steven in first drop down and Peter chosen in second drop down I would like to send PeterSteven (or Peter,Steven or Peter Steven) in my POST method in controller.
I have tried using partial view for that part of the modal view but the problem is that all my drop down ID's are the same and that is not valid HTML.
I have used this approach for adding drop downs and it worked, just the ID's were the same and I could not get every selected value and put them together and send them to POST method in my controller.
http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
I am open for new ideas, because I do not like the concept that I am using now.

Related

Inserting HTML into an AngularJS ng-repeat table

I'm attempting to insert a form as a new row underneath a row generated by ng-repeat. I can successfully add a row to the data model using .splice() but I'm not able to render the HTML when it is inserted. I have researched methods to accomplish this and the ones that are mentioned the most frequently involve the $watch and $compile functions. The issue is that I do not have an original tag to insert into as this is a brand new row in the table.
Idea behind this:
I have a table of data with many rows. The table represents data on "actions" that are for employees to accomplish. We are creating a web app that allows them to view their own actions and update them in the web page rather than updating a spreadsheet.
I was originally inserting a row dynamically with jQuery but as we are aware - it breaks the DOM. I'm trying to take the angular approach as this is an angular app, but I'm struggling with how to accomplish this.
The row that is inserted is a form for all the fields chosen and some extra ones not shown in the "view". Ideally, this would expand a row downwards when they click a button at the end of the row containing the action they are trying to edit. When they are done they can click a save button which removes/collapses the row and saves the changes to the model. This change is then sent back to the API to write the changes back to the database.
View of the Table:
Table view
View of the Form:
Form
Basically, I'd like to dynamically insert the form between rows shown in the table. I have to avoid jQuery and use AngularJS if possible.
Anyone have a neat trick to accomplish this?
Code (had to remove some stuff for privacy):
Pastebin: jf1mv9WG
Cheers,
Tux889
If I understand your question (and assuming you are using angular 1x), maybe you can use ng-repeat-start and ng-repeat-end to render two rows for every item; and in the second row put the form inside a td[colspan=n] (where n is the number of columns in your table). And make the two rows mutually exclusive, for example the first row can have ng-if="!item.showForm" and the second row can have ng-if="item.showForm".
Take a look a this example that I prepared: https://jsfiddle.net/miguelerm/9pus3zoc/
You can try to use ngBindHtml directive.
You can bind html to your table.

Sort and retrieve data with drop down menus in php

I have two drop down menus on my webpage. One is a course list and the other is a student list. What I want to do is, when a selection is made in the course menu it will update the student menu to only list students in that course.
All the course and student data is saved in a MySQL database. The SQL statements to retrieve the results I want are not a problem. I have those figured out. The problem is that I don't know how to get one drop down menu to update the other without the use of a submit button. Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
I've looked through several similar questions, but a lot of them end up resetting the first menu when the second is updated. I need to print both the selected course and student on the page at the end.
Is this something that can be done with PHP, or would Javascript be more preferable? If someone could point em in the right direction, that would be much appreciated.
Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
Yes. The buzz-word for this is AJAX.
You will end up using both JavaScript and PHP to do this. The actual implementation is quite involved, so I will list the basic steps for you.
(JavaScript) Bind the change event for the course drop down menu.
(JavaScript) When that event is fired, capture the selected course and fire an XMLHttpRequest off to your server along with the selected course.
(PHP) Capture the selected course, and run the SQL statement to fetch your students.
(PHP) Convert the student list to a text format (JSON, XML, delimited-text, etc.) to send back to the browser (using echo, print, etc).
(JavaScript) Populate the student drop down menu.
The general approach to this is to use jQuery to add a hook to your drop-down selector and trigger an AJAX load on another section of the page, populating that with data retrieved either as an HTML fragment (easy) or JSON data that's turned into one (harder).
A really quick and dirty version is to grab a portion of a page and re-populate the current document with it using $.load():
$('#select1').on('change', function() {
$('#select2').load('select.php #select2', 'select1=' + $(this).val())
})
That's the rough idea: When your first selection box changes, load the select.php page, or whatever you're using, and add on the parameter select=N where N is the selected value. It then rips out the #select2 section and replaces it.

Get data from unordered lists that are dynamically added to the page

I'm having a page where I can create some configuration sections and the page is structured as follows:
It has a button that adds a partial view to the page (using an AJAX call) and on this partial view I have:
Dropdown to select the section
List of available items
List of selected items
The list of selected items is populated using jQuery UI (sortable) via drag&drop. The items above can be repeated as much as the user wants. And I want to pass to the controller the data selected from all the dropdowns and from all the lists of selected items.
I have no idea how I can use a #model or even the ViewBag because the selected items list is initially empty and gets populated on the client side. As a side note, I don't need the list of available stuff.
UPDATE:
I've changed the question because I'm willing to put all the data in a form and I gave up the idea to use javascript to collect the data and make a request to my controller. So now I'm trying to use the FormCollection to get the data. The only problem is that when I submit the form FormCollection has no data in it.
UPDATE 2:
After looking into the FormCollection and ModelBinding I've came upon an impediment. I can't get the items on the form that don't have the name property. The problem is that the <ul> or <li> elements don't have the name attribute. So the question would be, how can I get the data from those elements using the above mentioned methods if they don't have name ?
I have found the solution: I gave up on using lists and moved to using the select multiple with the ui.multiselect plugin. This solved the problem as the select has the name attribute and I can get the data using FormCollection.

How to access items of a .net collection using jquery in webforms

Within an asp webform project I am making a call to a web service that returns a result collection as follows.
Pseudo code return of collection
content (items are key value pair)
ID, 001
Title , My Book
DateCreated , 10/10/2011
Author, JSmith
What I would like to do is on the initial return only display the title of the book in a data repeater and then once the user clicks on a detail display the remaining fields in a separate pane div container of the form. I've done this in the past with generic lists in Silverlight and in MVC however in this project I cannot use either.
In conducting some research I have seen where people are using json to make similar calls. However I debugged with fiddler and I can see that entire collection is being returned to the UI so it seems I should be able to go directly at the collection vs making a new call back to the server? Within the UI I am not using asp:net controls but standard html to render the data in the data in the UI.
Example
<div class="resultcontainer">
<span class="labeltitle-small">Book Title</span><br />
<%= BookResults[0].Title %>
</div>
I'm able to query and return the results however where I am stuck is the best approach to display what I'll refer to as secondary data for the associated record.
I'd really appreciate any suggestions on how (from the client) to only show a view value of the collection and then once a record is selected have the other values displayed to the user.
Thank you
Well, perhaps a bit obvious, but have you considered a little bit of AJAX, using jQuery.ajax? You could attach an onclick even handler to the div and load the data in the appropriate part of the page when the user selects a particular book.
You can return a partial view from the controller. The resulting HTML can be displayed in a div using something along the lines of $("#detailDiv").html(partialView).

ASP.NET MVC Inline Edit

I am building an MVC 2 web app, where I want to display information about something (the parent) as well as child details which are displayed as rows (children have a many to one relationship to the parent).
I have implemented AJAX in MVC before using Ajax.BeginForm and partial views
Using this method - with minor changes for MVC 2 release.
I want to add the ability to edit child rows inline using ajax, but I would like to know how others implement this. Are there facilities in MVC that can do this?
Have a look at this post here. From what you're describing it's exactly what you need for your scenario. You can not only edit items inline but also add/remove item dynamically.
This is more of a requirement for Javascript plugin or library than ASP.NET MVC..
If you want the behaviour where you click on link and get into edit mode (like replace text with textbox) take a look at Jeditable.
Though I don't use it, I just create (for example, in a table) one row with fixed text and another with textboxes and then hide the one with textboxes and I only display it when user click on Edit link. I have
a save link in the edit row and when this is clicked I just hide the edit row. I post the data using regular form post not ajax post.

Categories

Resources