0

I am working on a project that focuses on collecting data from a Razor page to save to a database. The challenge is the following: 1. I am building a Page that Users can use to Select 2. I do not know how many Items that Users will Select ahead of time 3. I am building a Drop-Down with Razor from a .NET Core Web App and JQuery to populate remaining info about the selection in a Table Row. 4. I would like to be able to parse through the Users Selection and save each Record to the database, under the User's Name and other personal information 5. I am done with getting both the Users list and Product Lists to the Razor page.

What I need assistance with is the Dynamic Block of Fields that need to be generated on demand or by Tab action to provide a new row that users can use to add a new product.

Here is the code that I am using now on the Razor page to collect the first row:

    -----------   Code Starts Here -------------------------------
    <div style="width:100%;">
    <table>
        <th>Product Code</th>
        <th>Product Description</th>
        <th>Quantity</th>
        <th>Product Price</th>
        <tr>
            <td>
                <select class="form-control" id="ProductCode" name="ProductCode">
                    <option selected>Select Product</option>
                    @foreach (var ulsp in ViewData["prod"] as List<Scafolding.UlslineItemCodes>)
                    {
                        <option value="@ulsp.Id" data-description="@ulsp.DefaultDescription" 
                                data-price="@String.Format("{0:0.00}",ulsp.DefaultUnitPrice)">@ulsp.LineItemCode</option>
                    }
                </select>
            </td>
            <td>
                <input value="" class="form-control" id="ProductDesc" name="ProductDesc" style="width:500px;"/>
            </td>
            <td>
                <input value="0" class="form-control" id="quantity" name="quantity" style="width:50px;" placeholder="0"/>
            </td>
            <td>
                <input value="" class="form-control"  id="ProductPrice" name="ProductPrice" style="width:95px;" placeholder="$0.00" />
            </td>
        </tr>
    </table>
</div>
    <script>
    $(document).ready(function () {

        // wire up the change handler http://api.jquery.com/change/
        $("#ProductCode").change(function () {
            var data = "";
            // get the selected option's data values http://api.jquery.com/data/
            data = $("#ProductCode option:selected").data();

            // set the inputs
            $("#ProductDesc").val(data.description);
            $("#quantity").val(data.quant);
            $("#ProductPrice").val(data.price).toFixed(2);
        });
    });

        $(document).ready(function () {

        $("#quantity").on("change", function () {
            var quant = "";
            var data = "";
            data = $("#ProductCode option:selected").data();
            quant = $("#quantity").val();
            $("#ProductPrice").val(data.price * quant).toFixed(2);

        });
    });
    </script>
    ---------------  Code Ends Here  ---------------------

How do I dynamically generate a new block of this code to allow users to select a new Item?

What is the best way to parse through the data in C#, once it is submitted, and save it to a database for processing?

Thank you for your guidance and recommendations.

Here is what my page looks like now:

Johnny
  • 819
  • 1
  • 10
  • 24
  • Refer the answers [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) and [here](http://stackoverflow.com/questions/40539321/a-partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892) for some options –  Apr 18 '17 at 00:29
  • Writing a "New" option and making it redirect to a Create View when selected would be so much easier. Then after the Create Post, make the Action return to the original View. – Tiramonium Oct 03 '17 at 11:17

1 Answers1

0

In your GET Action create a SelectList with your Product options and keep it in a ViewBag with the same element name you use in your View later, so you won't need to do a explicit casting later with the ViewBag to use it. Would look like:

Action:

public ActionResult About(){
    List<Product> listProduct = context.Product.ToList();

    // List to populate the Dropdown, "value" parameter for the options, text to display in the options, "null" for not selecting any value (disambiguation)
    ViewBag.products = new SelectList(listProduct, "Id", "LineItemCode", null);
}

Then in your View:

<div class="form-group">
    //If you want a label for your select
    //<label for="products">Products:</label>
    @Html.DropDownList("products", null, null, htmlAttributes: new { @class = "form-control", placeholder = "Select Product" })
</div>

The DropDownList helper will automatically generate for you a select with all the options you put in the ViewBag, as long as it has a SelectList with the same name as the helper.

Tiramonium
  • 557
  • 5
  • 15