how to get value from modal form in asp.net
Question
-
User836525179 posted
hi guys
this is my project
in my project i need to change some values, and i use popup modal forms to do this
in my listview i generate more modal with textbox in each forms textbox get auto name like TextBox1_0,TextBox1_1,.....
my problem is how i can access for each textbox for each modal form
and how i know each text box is for which modal
and how i can update values with this system
<asp:SqlDataSource ID="sqldsAccounts" runat="server" ConnectionString='<%$ ConnectionStrings:ExnessStr %>' SelectCommand="panel_user_accounts" SelectCommandType="StoredProcedure"> <SelectParameters> <asp:SessionParameter SessionField="userid" Name="userid" Type="Int64"></asp:SessionParameter> </SelectParameters> </asp:SqlDataSource> <asp:ListView ID="lstAccounts" runat="server" DataSourceID="sqldsAccounts" ItemPlaceholderID="itemPlaceHolder" GroupPlaceholderID="grpPlaceHolder" > <LayoutTemplate> <asp:PlaceHolder ID="grpPlaceHolder" runat="server"></asp:PlaceHolder> </LayoutTemplate> <GroupTemplate> <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder> </GroupTemplate> <ItemTemplate> <div class="row"> <div class="col-md-12"> <div class="main-card mb-3 card"> <div class="card-body"> <div class="BaseAccountCard_labelsContainer" data-test="account-card-labels"> <div class="BaseAccountCard_label BaseAccountCard_label_yellow">حساب</div> <div class="BaseAccountCard_topText BaseAccountCard_topTextRTL"><%#Eval("accNumber") %></div> </div> <div class="BaseAccountCard_balance" data-test="account-card-balance"> <div><span class="Money_balanceSmall"><%#Eval("urealfunds") %> USD</span></div> <div class="common_minorText common_top4 common_desktop">مبلغ قابل برداشت</div> </div> <div class="collapse col-lg-6" id='collapseExample<%#Eval("id") %>'> <div class="ActiveAccountDetails_columnX2"> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>نوع حساب:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value"><span class="common_camelCase"><%#Eval("accType") %></span></div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>شماره حساب:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value"><span class="common_camelCase"><%#Eval("accNumber") %></span></div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>سرور :</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value">mt4real1.exness.com:443</div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>وجوه قابل برداشت:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value DetailsRow_money"><%#Eval("urealfunds") %></div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>فیلد :</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value DetailsRow_money">مقدار</div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>نیرو :</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value"> <div class="ButtonLink_container" data-toggle="modal" data-target='#leverage_<%#Eval("accNumber") %>'> <%#Eval("uleverage") %> </div> <div class="modal fade" id='leverage_<%#Eval("accNumber") %>' tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">اهرم معاملاتی</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="position-relative form-group"> <label>مقدار اهرم معاملاتی</label> <asp:TextBox ID="TextBox1" runat="server" Text="1:888" class="form-control"></asp:TextBox> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>نام مستعار :</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value"> <div class="ButtonLink_container" data-toggle="modal" data-target='#nickname_<%#Eval("accNumber") %>'> اضافه کردن </div> <div class="modal fade" id='nickname_<%#Eval("accNumber") %>' tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p class="mb-0">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>دسترسی فقط خواندنی:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value"> <div class="ButtonLink_container" data-toggle="modal" data-target='#readonlyaccess_<%#Eval("accNumber") %>'> تنظیم </div> <div class="modal fade" id='readonlyaccess_<%#Eval("accNumber") %>' tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p class="mb-0">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>رمز عبور معاملات:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value"> <div class="ButtonLink_container" data-toggle="modal" data-target='#tradingpass_<%#Eval("accNumber") %>'> تغییر دادن </div> <div class="modal fade" id='tradingpass_<%#Eval("accNumber") %>' tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p class="mb-0">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="card-footer" data-toggle="collapse" href='#collapseExample<%#Eval("id") %>' class="btn btn-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="8px" height="8px" viewBox="0 0 8 8" class="IconArrowSmall_icon"><path transform="rotate(0 4 4)" fill="#B1B1B1" d="M0 2h8l-4 4z"></path></svg> </div> </div> </div> </div> </ItemTemplate> </asp:ListView>
Answers
-
User-1330468790 posted
Hi, uniservice3,
As @ryanbesko said, the modals can be accessed as a part of DOM. It is not difficult to fetch them through Javascript/Jquery.
However, what you need is to fetch the data inside the modal and use this data to update the database. That way, you will have to communicate with the server, which means the state of the current page will be lost since the communication between the server side and the client side is stateless.
What I suggest is as below:
Regarding your questions:
"how i can access for each textbox for each modal form and how i know each text box is for which modal"
- Using the "ItemCommand" event to deal with the update stuff. In this event, the event argument will bring the current updating item in which you can find the "TextBox1" with its value.
"how i can update values with this system"
- Using SqlDataSource control "sqldsAccounts" which you already set in the page. You can update the date by adding the updateCommand + updateParameters and triggering "Update" to update the data. Do not forget to call Select method of the control "sqldsAccounts" to rebind the data to the ListView control.
What's more, you have to keep the page state during the post back process. For example, the collapsed panel.
- Using the hidden field to keep the state of the collapse panel. There are varies ways to implement this while I will show you through javascript code.
You might still need to consider the state of the modal but we ignore this temporarily since you main target is to fetch the data.
More details, please refer to below code:
.aspx Page: (I only use the first modal and delete the rest which are confusing to me)
<asp:SqlDataSource ID="sqldsAccounts" runat="server" ConnectionString='<%$ ConnectionStrings:ConnectionString %>' SelectCommand="SELECT * FROM [Accounts] WHERE userid = @userid"> <SelectParameters> <asp:SessionParameter SessionField="userid" Name="userid" Type="Int64"></asp:SessionParameter> </SelectParameters> </asp:SqlDataSource> <asp:HiddenField ID="hf_storeCollapsed" runat="server" /> <asp:ListView ID="lstAccounts" runat="server" DataSourceID="sqldsAccounts" ItemPlaceholderID="itemPlaceHolder" GroupPlaceholderID="grpPlaceHolder" OnItemCommand="lstAccounts_ItemCommand"> <LayoutTemplate> <asp:PlaceHolder ID="grpPlaceHolder" runat="server"></asp:PlaceHolder> </LayoutTemplate> <GroupTemplate> <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder> </GroupTemplate> <ItemTemplate> <div class="row"> <div class="col-md-12"> <div class="main-card mb-3 card"> <div class="card-body"> <div class="BaseAccountCard_labelsContainer" data-test="account-card-labels"> <div class="BaseAccountCard_label BaseAccountCard_label_yellow">حسابAccount</div> <div class="BaseAccountCard_topText BaseAccountCard_topTextRTL"><%#Eval("accNumber") %></div> </div> <div class="BaseAccountCard_balance" data-test="account-card-balance"> <div><span class="Money_balanceSmall"><%#Eval("urealfunds") %> USD</span></div> <div class="common_minorText common_top4 common_desktop">مبلغ قابل برداشتAmount deductible</div> </div> <div class="collapse col-lg-6" id='collapseExample<%#Eval("id") %>'> <div class="ActiveAccountDetails_columnX2"> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>نوع حسابAccount type:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value"><span class="common_camelCase"><%#Eval("accType") %></span></div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>شماره حسابaccount number:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value"><span class="common_camelCase"><%#Eval("accNumber") %></span></div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>سرور Server:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value">mt4real1.exness.com:443</div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>وجوه قابل برداشتFunds withdrawable:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value DetailsRow_money"><%#Eval("urealfunds") %></div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>فیلد field:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value DetailsRow_money">مقدارthe amount of</div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>نیروForce :</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value"> <div class="ButtonLink_container" data-toggle="modal" data-target='#leverage_<%#Eval("accNumber") %>'> 1:<%#Eval("uleverage") %> </div> <div class="modal fade" id='leverage_<%#Eval("accNumber") %>' tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">اهرم معاملاتیTrading Leverage</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="position-relative form-group"> <label>مقدار اهرم معاملاتیAmount of trading leverage</label> <asp:TextBox ID="TextBox1" runat="server" Text='<%#Eval("uleverage") %>' class="form-control"></asp:TextBox> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <asp:Button CssClass="btn btn-primary" ID="leverageBtn" runat="server" CommandName="changeLeverage" CommandArgument='<%#Eval("accNumber") %>' Text="Save changes" /> </div> </div> </div> </div> </div> </div> </div> </div> </div> <asp:HiddenField ID="hf_collapse_id" runat="server" Value='<%#Eval("id") %>' /> <div class="card-footer" data-toggle="collapse" href='#collapseExample<%#Eval("id") %>' class="btn btn-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="8px" height="8px" viewBox="0 0 8 8" class="IconArrowSmall_icon"> <path transform="rotate(0 4 4)" fill="#B1B1B1" d="M0 2h8l-4 4z"></path></svg> </div> </div> </div> </div> </ItemTemplate> </asp:ListView>Script in <head> tag:
<script type="text/javascript"> $().ready(function () { //click to add/remove collapse $(".card-footer").click(function () { console.log($('#' + '<%=hf_storeCollapsed.ClientID%>').val()) var collapsedIds = $('#' + '<%=hf_storeCollapsed.ClientID%>'); var collapsedIdArray = collapsedIds.val().split(','); var collapseId = $(this).prev().val(); if (collapsedIdArray.indexOf(collapseId) != -1) { collapsedIdArray = $.grep(collapsedIdArray, function (element) { return element != collapseId; }); } else { collapsedIdArray.push(collapseId); }; collapsedIds.val(collapsedIdArray.join(',')); console.log($('#' + '<%=hf_storeCollapsed.ClientID%>').val()); }); restoreCollapse(); }); function restoreCollapse() { var collapsedIds = $('#' + '<%=hf_storeCollapsed.ClientID%>'); var collapsedIdArray = collapsedIds.val().split(','); $.each(collapsedIdArray, function (index, value) { if (value != "") { var collapseBlock = $('#collapseExample' + value); collapseBlock.collapse('show'); } }); } </script>Code behind: simulation of the data and doing update stuff
protected void Page_Load(object sender, EventArgs e) { //always let Session["userid"] to be 1 to simulate the data Session["userid"] = 1; } protected void lstAccounts_ItemCommand(object sender, ListViewCommandEventArgs e) { if (e.CommandName == "changeLeverage") { TextBox textbox1 =(TextBox) e.Item.FindControl("TextBox1"); sqldsAccounts.UpdateCommand = "Update [Accounts] SET uleverage = @uleverage WHERE accNumber= @accNumber AND userid = @userid"; Parameter userid = new Parameter() { Name = "userid", Type = TypeCode.Int64, DefaultValue= Session["userid"].ToString() }; Parameter accNumber = new Parameter() { Name = "accNumber", Type = TypeCode.Int32, DefaultValue = e.CommandArgument.ToString() }; Parameter uleverage = new Parameter() { Name = "uleverage", Type = TypeCode.Int32, DefaultValue = textbox1.Text }; sqldsAccounts.UpdateParameters.Add(userid); sqldsAccounts.UpdateParameters.Add(accNumber); sqldsAccounts.UpdateParameters.Add(uleverage); sqldsAccounts.Update(); sqldsAccounts.Select(DataSourceSelectArguments.Empty); } }Demo:
Hope this can help you.
Best regards,
Sean
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
All replies
-
User-1330468790 posted
Hi, uniservice3,
As @ryanbesko said, the modals can be accessed as a part of DOM. It is not difficult to fetch them through Javascript/Jquery.
However, what you need is to fetch the data inside the modal and use this data to update the database. That way, you will have to communicate with the server, which means the state of the current page will be lost since the communication between the server side and the client side is stateless.
What I suggest is as below:
Regarding your questions:
"how i can access for each textbox for each modal form and how i know each text box is for which modal"
- Using the "ItemCommand" event to deal with the update stuff. In this event, the event argument will bring the current updating item in which you can find the "TextBox1" with its value.
"how i can update values with this system"
- Using SqlDataSource control "sqldsAccounts" which you already set in the page. You can update the date by adding the updateCommand + updateParameters and triggering "Update" to update the data. Do not forget to call Select method of the control "sqldsAccounts" to rebind the data to the ListView control.
What's more, you have to keep the page state during the post back process. For example, the collapsed panel.
- Using the hidden field to keep the state of the collapse panel. There are varies ways to implement this while I will show you through javascript code.
You might still need to consider the state of the modal but we ignore this temporarily since you main target is to fetch the data.
More details, please refer to below code:
.aspx Page: (I only use the first modal and delete the rest which are confusing to me)
<asp:SqlDataSource ID="sqldsAccounts" runat="server" ConnectionString='<%$ ConnectionStrings:ConnectionString %>' SelectCommand="SELECT * FROM [Accounts] WHERE userid = @userid"> <SelectParameters> <asp:SessionParameter SessionField="userid" Name="userid" Type="Int64"></asp:SessionParameter> </SelectParameters> </asp:SqlDataSource> <asp:HiddenField ID="hf_storeCollapsed" runat="server" /> <asp:ListView ID="lstAccounts" runat="server" DataSourceID="sqldsAccounts" ItemPlaceholderID="itemPlaceHolder" GroupPlaceholderID="grpPlaceHolder" OnItemCommand="lstAccounts_ItemCommand"> <LayoutTemplate> <asp:PlaceHolder ID="grpPlaceHolder" runat="server"></asp:PlaceHolder> </LayoutTemplate> <GroupTemplate> <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder> </GroupTemplate> <ItemTemplate> <div class="row"> <div class="col-md-12"> <div class="main-card mb-3 card"> <div class="card-body"> <div class="BaseAccountCard_labelsContainer" data-test="account-card-labels"> <div class="BaseAccountCard_label BaseAccountCard_label_yellow">حسابAccount</div> <div class="BaseAccountCard_topText BaseAccountCard_topTextRTL"><%#Eval("accNumber") %></div> </div> <div class="BaseAccountCard_balance" data-test="account-card-balance"> <div><span class="Money_balanceSmall"><%#Eval("urealfunds") %> USD</span></div> <div class="common_minorText common_top4 common_desktop">مبلغ قابل برداشتAmount deductible</div> </div> <div class="collapse col-lg-6" id='collapseExample<%#Eval("id") %>'> <div class="ActiveAccountDetails_columnX2"> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>نوع حسابAccount type:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value"><span class="common_camelCase"><%#Eval("accType") %></span></div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>شماره حسابaccount number:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value"><span class="common_camelCase"><%#Eval("accNumber") %></span></div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>سرور Server:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value">mt4real1.exness.com:443</div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>وجوه قابل برداشتFunds withdrawable:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value DetailsRow_money"><%#Eval("urealfunds") %></div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>فیلد field:</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value DetailsRow_money">مقدارthe amount of</div> </div> <div class="DetailsRow_row DetailsRow_detailRow" data-test="account-card-details-row"> <div class="DetailsRow_column DetailsRow_label"> <div><span>نیروForce :</span></div> <div class="DetailsRow_labelBorder"></div> </div> <div class="DetailsRow_column DetailsRow_value"> <div class="ButtonLink_container" data-toggle="modal" data-target='#leverage_<%#Eval("accNumber") %>'> 1:<%#Eval("uleverage") %> </div> <div class="modal fade" id='leverage_<%#Eval("accNumber") %>' tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">اهرم معاملاتیTrading Leverage</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="position-relative form-group"> <label>مقدار اهرم معاملاتیAmount of trading leverage</label> <asp:TextBox ID="TextBox1" runat="server" Text='<%#Eval("uleverage") %>' class="form-control"></asp:TextBox> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <asp:Button CssClass="btn btn-primary" ID="leverageBtn" runat="server" CommandName="changeLeverage" CommandArgument='<%#Eval("accNumber") %>' Text="Save changes" /> </div> </div> </div> </div> </div> </div> </div> </div> </div> <asp:HiddenField ID="hf_collapse_id" runat="server" Value='<%#Eval("id") %>' /> <div class="card-footer" data-toggle="collapse" href='#collapseExample<%#Eval("id") %>' class="btn btn-primary"> <svg xmlns="http://www.w3.org/2000/svg" width="8px" height="8px" viewBox="0 0 8 8" class="IconArrowSmall_icon"> <path transform="rotate(0 4 4)" fill="#B1B1B1" d="M0 2h8l-4 4z"></path></svg> </div> </div> </div> </div> </ItemTemplate> </asp:ListView>Script in <head> tag:
<script type="text/javascript"> $().ready(function () { //click to add/remove collapse $(".card-footer").click(function () { console.log($('#' + '<%=hf_storeCollapsed.ClientID%>').val()) var collapsedIds = $('#' + '<%=hf_storeCollapsed.ClientID%>'); var collapsedIdArray = collapsedIds.val().split(','); var collapseId = $(this).prev().val(); if (collapsedIdArray.indexOf(collapseId) != -1) { collapsedIdArray = $.grep(collapsedIdArray, function (element) { return element != collapseId; }); } else { collapsedIdArray.push(collapseId); }; collapsedIds.val(collapsedIdArray.join(',')); console.log($('#' + '<%=hf_storeCollapsed.ClientID%>').val()); }); restoreCollapse(); }); function restoreCollapse() { var collapsedIds = $('#' + '<%=hf_storeCollapsed.ClientID%>'); var collapsedIdArray = collapsedIds.val().split(','); $.each(collapsedIdArray, function (index, value) { if (value != "") { var collapseBlock = $('#collapseExample' + value); collapseBlock.collapse('show'); } }); } </script>Code behind: simulation of the data and doing update stuff
protected void Page_Load(object sender, EventArgs e) { //always let Session["userid"] to be 1 to simulate the data Session["userid"] = 1; } protected void lstAccounts_ItemCommand(object sender, ListViewCommandEventArgs e) { if (e.CommandName == "changeLeverage") { TextBox textbox1 =(TextBox) e.Item.FindControl("TextBox1"); sqldsAccounts.UpdateCommand = "Update [Accounts] SET uleverage = @uleverage WHERE accNumber= @accNumber AND userid = @userid"; Parameter userid = new Parameter() { Name = "userid", Type = TypeCode.Int64, DefaultValue= Session["userid"].ToString() }; Parameter accNumber = new Parameter() { Name = "accNumber", Type = TypeCode.Int32, DefaultValue = e.CommandArgument.ToString() }; Parameter uleverage = new Parameter() { Name = "uleverage", Type = TypeCode.Int32, DefaultValue = textbox1.Text }; sqldsAccounts.UpdateParameters.Add(userid); sqldsAccounts.UpdateParameters.Add(accNumber); sqldsAccounts.UpdateParameters.Add(uleverage); sqldsAccounts.Update(); sqldsAccounts.Select(DataSourceSelectArguments.Empty); } }Demo:
Hope this can help you.
Best regards,
Sean
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
-
User-1330468790 posted
Hi, uniservice3,
- You problem: "your codes is for just for 1 row"
- Actually, the code I provided with you is applicable for all of rows.
That's the reason why I suggest you use the event "ItemCommand" to handle the update. Each account information is listed in one item inside the list view control so that the button could get the corresponding textbox.
Here I presume the 'accNumber' will be different (unique) for one 'userid' so that I bind the 'accNumber' to the "Save changes" button as the 'CommandArgument'.
Once the user presses the button, the leverage value will be updated by the combination of 'accNumber' and 'userid' (see code behind).
If the presumption is wrong, please note that you should have an unique combination/column to identify the belonging of the leverage for each user and use that unique value to update the database.
Moveover, you could adopt the same strategy for the rest of the update/change. For example, if an user wants to change the alias, the alias will be updated by the same combination.
I will show you that the demo above works for every row.
Demo:
If you have questions about designing the schema of database, it would be a new topic so you could have a new post.
Hope this can help you.
Best regards,
Sean
