Building Interactive UI in ASP.NET Web Forms with Data Binding & jQuery

HTML & ASP.NET Web Forms

<div class="box-5 text-right" id="dvbtnn" runat="server"> 
    <a href="#" id="applyanchor" class="apply-btn" data-bs-toggle="modal"
        onclick="return filldata('<%#DataBinder.Eval(Container.DataItem, "ipo_prfrm")%>',
        '<%#DataBinder.Eval(Container.DataItem, "priceto")%>',
        '<%#DataBinder.Eval(Container.DataItem, " minord")%>',
        '<%#DataBinder.Eval(Container.DataItem, " mklot")%>',
        '<%#DataBinder.Eval(Container.DataItem, " symbse")%>',
        '<%#DataBinder.Eval(Container.DataItem, "filename")%>','','<%#FormatFunctions.C_Format.M_FormatDate(DataBinder.Eval(Container.DataItem, " issuefrm").ToString(), "dd/MMM/yyyy")%>',
        '<%#FormatFunctions.C_Format.M_FormatDate(DataBinder.Eval(Container.DataItem, " issueto").ToString(), "dd/MMM/yyyy")%>',
        '<%#FormatFunctions.C_Format.M_FormatDate(DataBinder.Eval(Container.DataItem, " MTimFrm").ToString(), "hh:mm tt")%>',
        '<%#FormatFunctions.C_Format.M_FormatDate(DataBinder.Eval(Container.DataItem, " MTimTo").ToString(), "hh:mm tt")%>','','',
        '<%#DataBinder.Eval(Container.DataItem, " tick")%>',
        '<%#DataBinder.Eval(Container.DataItem, "ExTypeNew")%>',
        '<%# FormatIpoName(DataBinder.Eval(Container.DataItem, " name").ToString()) %>');"
        data-bs-target="#apply">APPLY</a>
    <a style="display: none;" href="companyinfo.aspx"><i class="fa fa-angle-right"></i></a>
</div>
 <asp:HiddenField ID="minprice" runat="server" />
                                <asp:HiddenField ID="maxprice" runat="server" />
                                <asp:HiddenField ID="categoryhdn" runat="server" />
                                <asp:HiddenField ID="symbolhdn" runat="server" />
                                <asp:HiddenField ID="discounthdn" runat="server" />
                                <asp:HiddenField ID="issuefromtimehdn" runat="server" />
                                <asp:HiddenField ID="issuetotimehdn" runat="server" />
                                <asp:HiddenField ID="issuefromdatehdn" runat="server" />
                                <asp:HiddenField ID="issuetodatehdn" runat="server" />
                                <asp:HiddenField ID="ticksizehdn" runat="server" />
                                <asp:HiddenField ID="minqty" runat="server" /> 
                                <asp:HiddenField ID="lotsize" runat="server" />
                                <asp:HiddenField ID="exchanges" runat="server" />
                                <asp:HiddenField ID="NAME" runat="server" />

Explanation of ASP.NET Data Binding

• <%# %> (Data Binding Expression)

  • This is an ASP.NET data-binding syntax that pulls values from the data source and binds them to the HTML elements at runtime. This is typically used inside controls like Repeater, GridView, or ListView.

  • DataBinder.Eval(Container.DataItem, "field_name") is the syntax used to bind data from the current item (from a data source, like a database, that is being iterated over). It pulls the value for a specific field, in this case, fields like " prfrm", "priceto", " symbse", and so on.

  • FormatFunctions.C_Format.M_FormatDate() is a custom function (possibly a helper function) that formats the date values for display.

How it Works

• When the page is rendered, these data binding expressions are evaluated by ASP.NET, and the corresponding values (like prfrm, priceto, symbse, etc.) are inserted dynamically into the JavaScript function call.

• The onclick event triggers a JavaScript function (filldata) and passes these dynamically bound values as arguments to the function.

JavaScript (filldata function)

function filldata(pricef, priceto, minqty, lot, symbol, logoname, category, issuefromdate, issuetodate, issuefromtime, issuetotime, discounttype, discount, ticksize, exchange,  name) {
    $("#symbolhdn").val(symbol);
    $("#minqty").val(minqty);
    $("#lotsize").val(lot);
    $("#minprice").val(pricef);
    $("#maxprice").val(priceto);
    $("#exchanges").val(exchange);
    $("# NAME").val(iponame);
    $("#logodiv").attr("src", "admin/files/" + logoname);
   $("#issuefromtimehdn").val(issuefromtime);
    $("#issuetotimehdn").val(issuetotime);
    $("#issuefromdatehdn").val(issuefromdate);
    $("#issuetodatehdn").val(issuetodate);
}

Explanation of filldata Function

• Purpose: The function filldata is used to dynamically populate HTML elements with values, which are passed from the server-side (ASP.NET) to the client-side (JavaScript). It allows the frontend to reflect the data bound from the backend (e.g., IPO-related details) when the user interacts with the page.

Details of What Happens Inside the filldata Function

• Updating Hidden Form Fields: The function uses jQuery to update form fields with the passed values.

  • $("#symbolhdn").val(symbol); sets the value of the hidden field with the symbol passed from the backend.

  • Similarly, other fields like minqty, lotsize, minprice, maxprice, and exchanges are populated with the corresponding values passed to the function.

• Changing the Image Source

  • $("#logodiv").attr("src", "admin/files/" + logoname); dynamically updates an image source (e.g., an IPO company logo) by appending the logoname (likely the filename of the image) to the URL.

• Category Function:

  • categorysymbol();: This seems like a function call to a method that handles some further functionality, possibly modifying the category or symbol of the IPO in some way.

• Setting Date and Time:

  • The function also sets the issue dates and times for the IPO in hidden fields, which are likely used to handle backend processing or form submissions.

Modal Interaction

• Bootstrap Modal: The data-bs-toggle="modal" and data-bs-target="#apply" attributes indicate that this link triggers a Bootstrap modal with the id="apply". The modal is displayed when the user clicks the "APPLY" button.

• The modal will likely be populated with all the data passed to the filldata function, allowing the user to see more details and potentially make a decision or take action related to the IPO.

Full Flow

1. Rendering Page

   • ASP.NET binds the data from a data source (like a database) into the HTML elements dynamically using the <%# DataBinder.Eval %> expressions.

2. User Clicks "APPLY"

   • When the user clicks the "APPLY" button, the onclick event triggers the filldata JavaScript function.

   • The JavaScript function fills in various hidden fields, image sources, and other UI elements with the data that was dynamically bound from the backend.

3. Populate Modal

   • The modal (with id="apply") is shown, and the data is now available for further interaction (e.g., the user can see details like issue dates, prices, and symbol).

Key Takeaways

• Data Binding (ASP.NET): The use of <%# %> syntax in ASP.NET enables dynamic insertion of data into the HTML elements. This allows backend data to be passed to the frontend dynamically.

• Client-Side Interaction (JavaScript/jQuery): The filldata function takes the dynamic data and uses jQuery to update various elements on the page, such as hidden fields, image sources, and form controls, providing a seamless interactive experience.

• Bootstrap Modal: The modal is triggered dynamically, and it can be populated with values passed through JavaScript, making it possible to show details to the user in an organized and interactive way.