I'm trying to auto populate labels(with parameters from object) on selecting option from dropdo-CodePudding

I'm new to mvc and html/js both.

So the basic idea of what I am trying to do is:

Dropdown(used to select bookTitle)
Labels below get auto populated with selected book details from dropdown(id,title,author,price,quantity,etc)
Button on the side of these labels which will add this obj into a List
Whole list will then be used for checkout

I'm stuck with the auto-populated labels and add button Would be a grateful if anyone would be willing to help me

Here is my code:

'''

    @model IEnumerable<BookWebApp.Models.Books>
    @{
    ViewData["Title"] = "OrderBooks";
    Layout = "~/Views/Shared/_Layout.cshtml";
    }
    <html>
        <center>
          <h1>OrderBooks</h1>
          <hr/>

        <div id="Title">
            <select id="Title_Select">
             <option value="" selected-disabled>
             Book Names
             </option>

        @foreach(var item in Model)
        {
             <option [email protected]>
             @item.Title
             </option>
        
         }
            </select>
        </div>

        <button onclick="getValue()"> Check Details</button>
        <hr/>
        <div>
        <table >
        <thead>
               <tr>
                  <th>
                       @Html.DisplayNameFor(model => model.BookID)
                  </th>
                  <th>
                       @Html.DisplayNameFor(model => model.Title)
                  </th>
                  <th>
                       @Html.DisplayNameFor(model => model.Author)
                  </th>
                  <th>
                       @Html.DisplayNameFor(model => model.Price)
                  </th>
                  <th>
                       @Html.DisplayNameFor(model => model.Quantity)
                  </th>
                  <th></th>
             </tr>
         </thead>
         <tbody>
              <tr>
                   //labels for obj here
              </tr>
         </tbody>
     </table>
     </div>

     </center>

'''

CodePudding user response：

To populate the list you can do as you did with the DropdownList with a foreach and insert all the fields in the order of the header and on the last one check with value id. Finally, a push button for the with an onclick function. In the onclick function you scroll through the list and take Id of all the checkboxes that have the checked property. You now have the list of all the selected books. if you want I can give you an example but I suggest you see for yourself that it is much more instructive, tell me if you want the example

CodePudding user response：

There are two ways you can add the labels to the list and then bring the list to the Checkout page, use ajax to post data or use MVC submission. I would recommend the first one (using ajax) because the page will not be refreshed.

Solution 1: Use ajax

Create a Controller method to save the record
Whenever the user click on the button, make an ajax call to post the item to the method, save it to somewhere (Persistence database or cache)
When user navigate to the check-out page, retrieve the list and display to the user
Also you may want to add a remove button for easily manage.

Here's the code to populate the labels:

<thead>
    <tr>
       <th>
            @Html.DisplayNameFor(model => model.BookID)
       </th>
       <th>
            @Html.DisplayNameFor(model => model.Title)
       </th>
       <th>
            @Html.DisplayNameFor(model => model.Author)
       </th>
       <th>
            @Html.DisplayNameFor(model => model.Price)
       </th>
       <th>
            @Html.DisplayNameFor(model => model.Quantity)
       </th>
       <th>
        <!-- This one is for the add button -->
       </th>
  </tr>
</thead>
<tbody>
    @foreach(var label in Model.Labels)
    {
        <tr >
            // labels for obj here
            <td >@label.Id</td>
            <td >@label.Title</td>
            <td >@label.Author</td>
            <td >@label.Price</td>
            <td >@label.Quantity</td>
            <td>
                <button  onclick="addLabel(this)"></button>
            </td>
        </tr>
    }
</tbody>

<script>
    function addLabel(el) {
        // query for the properties value then use ajax to post the data to controller
        // also save it to the current page state for easily modify
    }
</script>

CodePudding user response：

There are multiple methods to achieve your goal to auto populate label data:

Set Attribute values to your select which comprise of details of books. 1.1. Implement an onChange function for your select which will populate data from Select attribute in your labels.
Implement an onChange function for your select which will send an ajax call to your controller. 2.1. Retrieve values from controller and populate relevant values in labels
Create a separate button, on its onClick send an ajax call to your controller. 3.1. Retrieve values from controller and populate relevant values in labels

Now coming to Adding data in list: Why providing separate buttons for all labels? Why not add a button Proceed to check out?

And for that you can do:

$.each($(table).find('tbody tr'), function (j, row) {
});

in this code you get all your label values and push them in the list proceed as you please

I hope this helped, if you need code snippets for above mentioned processes, let me know, I will update my answer accordingly.