Now my div =divdynamicData get's value dynamically. when click on the btnSaveTODB all the values gone.i want to use this value and insert it into the database. Also how to perform the looping process using this div because all the DIV record is dynamic....<br/>
You can access the data submitted only through proper html control like <input>, <select> or <textarea>. These fields either have a runat="server" attribute so you can access them directly in your code behind.
I suggest you use hidden field to pass the value when you update or delete the values dynamically from the div.
I tried your js code and display the value I got in the code-behind. You can use the values to finish your data base stuff. (Note that I used <asp:HiddenField> which you can replace it with Html control
<input type="hidden">)
Member
16 Points
31 Posts
Use div value in code behind
Jan 21, 2020 06:15 PM|Programming and Design|LINK
Here is my aspx page code </br>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="../plugins/jQuery/jQuery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%= imagehs.ClientID %>").on("click", function (event) {
$("#textboxX").html("");
$("#textboxY").html("");
$("#textboxBPart").html("");
$("#divSaveDynamicDis").html("");
var values = new Array();
var x = event.pageX;
var y = event.pageY;
//$(".marker").remove();
$("body").append(
// $('<div class="marker"></div>').css({
//$('<div class="marker m_' + x + '_' + y + '" divdata-marker="m_' + x + '_' + y + '"></div>').css({
$('<div class="marker m_' + x + '_' + y + '"></div>').css({
position: 'absolute',
top: y + 'px',
left: x + 'px',
//top: event.pageY + 'px',
//left: event.pageX + 'px',
width: '10px',
height: '10px',
background: '#dd4b39',
'border-radius': '10px'
})
);
$("#textboxX").append('<div><input type="text" value="' + x + '" id="txtX" name="txtX"/></div>');
$("#textboxY").append('<div><input type="text" value="' + y + '" id="txtY" name="txtY"/></div>');
$("#textboxBPart").append("<div><input type='text' id='txtName' name='txtName'/></div>");
var $r = $('<button />', { type: 'button', text: 'Refresh Data', id: 'btn_refresh' });
var $cancle = $('<button />', { type: 'button', text: 'Cancle', id: 'btn_cancle' });
$("#divSaveDynamicDis").append($r);
$("#divSaveDynamicDis").append($cancle);
$r.on('click', function () {
if ($('input#txtName').val() == "") {
alert('Please complete the field');
$('input#txtName').focus();
return false;
}
//var NewData = '<div cla-ss="col-sm-12">' + x + ' ' + y + ' ' + txtName.value + ' <a href="javascript:void(0);" class="remCF" data-atrib=' + x +'>Remove</a> </div>';
//var NewData = '<div class="col-sm-12">' + x + ' ' + y + ' ' + txtName.value + ' <a href="javascript:void(0);" class="remCF" data-marker="m_' + x + '_' + y + '">Remove</a> </div>';
var NewData = '<div class="col-sm-12">' + x + ' ' + y + ' ' + txtName.value + ' <a href="javascript:void(0);" class="remCF" data-marker="m_' + x + '_' + y + '">Remove</a> </div>';
$("#<%= divdynamicData.ClientID %>").append(NewData);
$("#textboxX").html("");
$("#textboxY").html("");
$("#textboxBPart").html("");
$("#divSaveDynamicDis").html("");
});
$('.marker').on('click', function () {
$(this).remove();
// div_ref = $(this).attr('divdata-marker')
// $('#divdynamicData.' + div_ref).remove()
});
//$("#divdynamicData").live('click', '.remCF', function () {
//$("#divdynamicData").on('click', '.remCF', function () {
// //if (confirm("Are you sure?")) {
// marker_ref = $(this).attr('data-marker')
// $('.marker.' + marker_ref).remove()
// $(this).parent().remove();
// //}
// //return false;
//});
$("#<%= divdynamicData.ClientID %>").on('click', '.remCF', function () {
// if (confirm("Are you sure you want to delete?")) {
marker_ref = $(this).attr('data-marker')
$('.marker.' + marker_ref).remove()
$(this).parent().remove();
// }
});
$cancle.on('click', function () {
$("#textboxX").html("");
$("#textboxY").html("");
$("#textboxBPart").html("");
$("#divSaveDynamicDis").html("");
});
});
});
function test() {
return confirm('are you sure you want to delete!');
}
</script>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Image Hotspot</li>
</ol>
</nav>
<section class="content">
<div class="row">
<div class="col-lg-12">
<div class="box box-primary box-solid no-margin">
<div class="box-header">
<h3 class="box-title"><b> <i class="fa fa-hospital-o"></i> Image Hotspot</b></h3>
</div>
<!-- /.col-lg-12 -->
<div class="panel panel-default">
<form>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<fieldset>
<div class="form-group">
<label>Upload Image</label>
<asp:FileUpload ID="imageHotspotUpload" runat="server" />
</div>
</fieldset>
</div>
<div class="col-lg-6">
<asp:Image id="imagehs" name="imagehs" runat="server" Height = "500" Width = "500"/>
<div id="textboxX"></div>
<div id="textboxY"></div>
<div id="textboxBPart"></div>
<div id="divSaveDynamicDis"></div>
<div id="divdynamicData" runat="server"></div>
</div>
<asp:Button ID="btnSaveTODB" runat="server" Text="SaveToDB" OnClick="btnSaveTODB_Click" />
</div>
</div>
<div class="panel-heading">
<asp:Button ID="btnSave" runat="server" Text="Upload Image" class="btn btn-primary" OnClick="btnSave_Click"/>
<%-- <asp:Button ID="btn_save" runat="server" Text="Save" type="submit" class="btn btn-primary" OnClick="btn_save_Click" />--%>
<asp:Button ID="btn_cancel" runat="server" type="reset" class="btn btn-danger" Text="Cancel" formnovalidate />
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</asp:Content>
<br/>
Now my div =divdynamicData get's value dynamically. when click on the btnSaveTODB all the values gone.i want to use this value and insert it into the database. Also how to perform the looping process using this div because all the DIV record is dynamic....<br/>
protected void btnSaveTODB_Click(object sender, EventArgs e)
{
// Insert code
}
All-Star
53021 Points
23607 Posts
Re: Use div value in code behind
Jan 21, 2020 06:52 PM|mgebhard|LINK
You need to pick an approach and stick with it.
I recommend using standard Web Forms data bound server controls to render dynamic HTML. This will give the the state management you're looking for.
If you want to stay with JavaScript then you'll need to use AJAX rather than Post Backs.
However, you can fetch the inputs using classic ASP syntax.
protected void btnSaveTODB_Click(object sender, EventArgs e) { string txtX = Request["txtX"]; string txty = Request["txty"]; string txtName = Request["txtName"]; Label1.Text = $"{txtX} , {txty}, {txtName}"; }Member
10 Points
1 Post
Re: Use div value in code behind
Jan 22, 2020 09:30 AM|Sean-F|LINK
Hi, Programming and Design,
You can access the data submitted only through proper html control like <input>, <select> or <textarea>. These fields either have a runat="server" attribute so you can access them directly in your code behind.
I suggest you use hidden field to pass the value when you update or delete the values dynamically from the div.
I tried your js code and display the value I got in the code-behind. You can use the values to finish your data base stuff.
(Note that I used <asp:HiddenField> which you can replace it with Html control <input type="hidden">)
.aspx Page: (in content place holder)
<script type="text/javascript"> $(document).ready(function () { $("#<%= imagehs.ClientID %>").on("click", function (event) { $("#textboxX").html(""); $("#textboxY").html(""); $("#textboxBPart").html(""); $("#divSaveDynamicDis").html(""); var values = new Array(); var x = event.pageX; var y = event.pageY; //$(".marker").remove(); $("body").append( // $('<div class="marker"></div>').css({ //$('<div class="marker m_' + x + '_' + y + '" divdata-marker="m_' + x + '_' + y + '"></div>').css({ $('<div class="marker m_' + x + '_' + y + '"></div>').css({ position: 'absolute', top: y + 'px', left: x + 'px', //top: event.pageY + 'px', //left: event.pageX + 'px', width: '10px', height: '10px', background: '#dd4b39', 'border-radius': '10px' }) ); $("#textboxX").append('<div><input type="text" value="' + x + '" id="txtX" name="txtX"/></div>'); $("#textboxY").append('<div><input type="text" value="' + y + '" id="txtY" name="txtY"/></div>'); $("#textboxBPart").append("<div><input type='text' id='txtName' name='txtName'/></div>"); var $r = $('<button />', { type: 'button', text: 'Refresh Data', id: 'btn_refresh' }); var $cancle = $('<button />', { type: 'button', text: 'Cancle', id: 'btn_cancle' }); $("#divSaveDynamicDis").append($r); $("#divSaveDynamicDis").append($cancle); $r.on('click', function () { if ($('input#txtName').val() == "") { alert('Please complete the field'); $('input#txtName').focus(); return false; } //var NewData = '<div cla-ss="col-sm-12">' + x + ' ' + y + ' ' + txtName.value + ' <a href="javascript:void(0);" class="remCF" data-atrib=' + x +'>Remove</a> </div>'; //var NewData = '<div class="col-sm-12">' + x + ' ' + y + ' ' + txtName.value + ' <a href="javascript:void(0);" class="remCF" data-marker="m_' + x + '_' + y + '">Remove</a> </div>'; var NewData = '<div class="col-sm-12">' + x + ' ' + y + ' ' + txtName.value + ' <a href="javascript:void(0);" class="remCF" data-marker="m_' + x + '_' + y + '">Remove</a> </div>'; $("#<%= divdynamicData.ClientID %>").append(NewData); // update hidden field updateHF(); $("#textboxX").html(""); $("#textboxY").html(""); $("#textboxBPart").html(""); $("#divSaveDynamicDis").html(""); }); $('.marker').on('click', function () { $(this).remove(); // div_ref = $(this).attr('divdata-marker') // $('#divdynamicData.' + div_ref).remove() }); //$("#divdynamicData").live('click', '.remCF', function () { //$("#divdynamicData").on('click', '.remCF', function () { // //if (confirm("Are you sure?")) { // marker_ref = $(this).attr('data-marker') // $('.marker.' + marker_ref).remove() // $(this).parent().remove(); // //} // //return false; //}); $("#<%= divdynamicData.ClientID %>").on('click', '.remCF', function () { // if (confirm("Are you sure you want to delete?")) { marker_ref = $(this).attr('data-marker'); $('.marker.' + marker_ref).remove(); $(this).parent().remove(); // update hidden field updateHF(); // } }); $cancle.on('click', function () { $("#textboxX").html(""); $("#textboxY").html(""); $("#textboxBPart").html(""); $("#divSaveDynamicDis").html(""); }); }); }); function updateHF() { var tmp = []; $("#<%= divdynamicData.ClientID %> div").each(function () { var ctr = $(this).text().split(' ', 3); tmp.push(ctr); }) $("#<%= hf_divdynamicData.ClientID%>").val(JSON.stringify(tmp)); } function test() { return confirm('are you sure you want to delete!'); } </script> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Image Hotspot</li> </ol> </nav> <section class="content"> <div class="row"> <div class="col-lg-12"> <div class="box box-primary box-solid no-margin"> <div class="box-header"> <h3 class="box-title"><b> <i class="fa fa-hospital-o"></i> Image Hotspot</b></h3> </div> <!-- /.col-lg-12 --> <div class="panel panel-default"> <form> <div class="panel-body"> <div class="row"> <div class="col-lg-6"> <fieldset> <div class="form-group"> <label>Upload Image</label> <asp:FileUpload ID="imageHotspotUpload" runat="server" /> </div> </fieldset> </div> <div class="col-lg-6"> <asp:Image ID="imagehs" name="imagehs" runat="server" Height="500" Width="500" /> <div id="textboxX"></div> <div id="textboxY"></div> <div id="textboxBPart"></div> <div id="divSaveDynamicDis"></div> <asp:HiddenField ID="hf_divdynamicData" runat="server" Value="XXX"/> <div id="divdynamicData" runat="server"></div> </div> <asp:Button ID="btnSaveTODB" runat="server" Text="SaveToDB" OnClick="btnSaveTODB_Click" /> </div> </div> <div class="panel-heading"> <asp:Button ID="btnSave" runat="server" Text="Upload Image" class="btn btn-primary" OnClick="btnSave_Click" /> <%-- <asp:Button ID="btn_save" runat="server" Text="Save" type="submit" class="btn btn-primary" OnClick="btn_save_Click" />--%> <asp:Button ID="btn_cancel" runat="server" type="reset" class="btn btn-danger" Text="Cancel" /> </div> </form> </div> <div> <asp:Label ID="Label1" runat="server" ></asp:Label> <br /> <asp:Label ID="Label2" runat="server"></asp:Label> <br /> <asp:Label ID="Label3" runat="server"></asp:Label> </div> </div> </div> </div> </section>Code-behind:
protected void Page_Load(object sender, EventArgs e) { } protected void btnSave_Click(object sender, EventArgs e) { } protected void btnSaveTODB_Click(object sender, EventArgs e) { Label1.Text = hf_divdynamicData.Value; string[][] s = JsonConvert.DeserializeObject<string[][]>(hf_divdynamicData.Value); for (int i = 0; i < s.Length; i++) { Label2.Text += "\n X: " + s[i][0] + " Y: " + s[i][1] + " txtName: " + s[i][2] + "<br/>"; } } }Result as gif shows.
PS: Here I use JsonConvert to decode the value from json format.
Best regards,
Sean
Member
16 Points
31 Posts
Re: Use div value in code behind
Feb 09, 2020 04:16 PM|Programming and Design|LINK
@Sean-F thank you for your reply.