Asp.Net Control inside div not showing up in browser - asp.net

I have a table made out of divs. Theere is a main div as the table, then divs acting as a table cell, and table row. Inside the cells I have a label and a textbox. All are Asp.Net controls(textbox,label). Everything seems to show up in the browser except for one particular column and I have no Idea why. The "maiden name" column won't show.
Code:
<div class="block">
<div class="line">
<div class="labelcell">
<asp:Label ID="lblPersonLastName" runat="server" Text="Last Name: " meta:resourcekey="lblPersonLastNameResource1"/>
</div>
<div class="cell">
<asp:TextBox ID="txtPersonLastName" runat="server" MaxLength="200" Width="120px" meta:resourcekey="txtPersonLastNameResource1"/>
</div>
<div class="labelcell">
<asp:Label ID="lblPersonDateOfBirth" runat="server" Text="Date of Birth:" meta:resourcekey="lblPersonDateOfBirthResource1"/>
</div>
<div class="cell">
<asp:TextBox ID="txtPersonDateOfBirth" runat="server" MaxLength="20" Width="120px" meta:resourcekey="txtPersonDateOfBirthResource1"/>
<asp:RegularExpressionValidator ID="regValDate" runat="server" ControlToValidate="txtPersonDateOfBirth" ErrorMessage="Date format must be YYYY/MM/DD or YYYY-MM-DD" ValidationExpression="(^[0-9]{4,4}(/|-)[0-1][0-9](/|-)[0-3][0-9]$)" ValidationGroup="AddPerson" meta:resourcekey="regValDateResource1">*</asp:RegularExpressionValidator>
</div>
</div>
<div class="line">
<div class="labelcell">
<asp:Label ID="lblPersonFirstName" runat="server" Text="First Name: " meta:resourcekey="lblPersonFirstNameResource1"/>
</div>
<div class="cell">
<asp:TextBox ID="txtPersonFirstName" runat="server" MaxLength="200" Width="120px" meta:resourcekey="txtPersonFirstNameResource1"/>
</div>
<div class="labelcell">
<asp:Label ID="lblPersonAgeRange" runat="server" Text="Age Between:" meta:resourcekey="lblPersonAgeRangeResource1"/>
</div>
<div class="cell">
<asp:TextBox ID="txtPersonAgeRangeLow" runat="server" Width="30px" meta:resourcekey="txtPersonAgeRangeLowResource1"/>
<asp:Label ID="lblPersonAgeRangeAnd" runat="server" Text="and" Height="25px" meta:resourcekey="lblPersonAgeRangeAndResource1"/>
<asp:TextBox ID="txtPersonAgeRangeHigh" runat="server" Width="30px" meta:resourcekey="txtPersonAgeRangeHighResource1" />
</div>
</div>
<div class="line">
<div class="labelcell">
<asp:Label ID="lblPersonMiddleName" runat="server" Text="Middle Name: " meta:resourcekey="lblPersonMiddleNameResource1"/>
</div>
<div class="cell">
<asp:TextBox ID="txtPersonMiddleName" runat="server" MaxLength="128" Width="120px" meta:resourcekey="txtPersonMiddleNameResource1"/>
</div>
<div class="labelcell">
<asp:Label ID="lblPersonSex" runat="server" Text="Sex:" meta:resourcekey="lblPersonSexResource1"/>
</div>
<div class="cell">
<asp:RadioButton ID="rdbPersonSexMale" runat="server" AutoPostBack="True" OnDataBinding="SexChange" OnCheckedChanged="SexChange" GroupName="PersonSex" Text="Male " meta:resourcekey="rdbPersonSexMaleResource1"/>
<asp:RadioButton ID="rdbPersonSexFemale" runat="server" AutoPostBack="True" OnDataBinding="SexChange" OnCheckedChanged="SexChange" GroupName="PersonSex" Text="Female " meta:resourcekey="rdbPersonSexFemaleResource1" />
</div>
</div>
<div class="line">
<div class="labelcell">
<asp:Label ID="lblPersonStatus" runat="server" Text="Status:" meta:resourcekey="lblPersonStatusResource1"/>
</div>
<div class="cell">
<asp:DropDownList ID="ddlPersonStatus" runat="server" AppendDataBoundItems="True" DataSourceID="dsPersonStatus" DataTextField="Status" DataValueField="StatusID" OnPreRender="ddlPersonStatus_PreRender" Width="120px" meta:resourcekey="ddlPersonStatusResource1">
<asp:ListItem Value="-1" meta:resourcekey="ListItemResource2">--Select--</asp:ListItem>
</asp:DropDownList>
</div>
<div class="labelcell">
<asp:Label ID="lblPersonMaidenName" runat="server" Text="Maiden Name:" meta:resourcekey="lblPersonMaidenNameResource1"/>
</div>
<div class="cell">
<asp:TextBox ID="txtPersonMaidenName" runat="server" MaxLength="200" Width="120px" meta:resourcekey="txtPersonMaidenNameResource1"/>
</div>
</div>
<div class="line">
<div class="labelcell">
<asp:Label ID="lblPersonThirdName" runat="server" Text="Third Name: " meta:resourcekey="lblPersonThirdNameResource1"/>
</div>
<div class="cell">
<asp:TextBox ID="txtPersonThirdName" runat="server" MaxLength="128" Width="120px" meta:resourcekey="txtPersonThirdNameResource1"/>
</div>
<div class="labelcell">
<asp:Label ID="lblPersonFps" runat="server" Text="FPS: " meta:resourcekey="lblPersonFpsResource1"/>
</div>
<div class="cell">
<asp:TextBox ID="txtPersonFps" runat="server" MaxLength="200" Width="120px" meta:resourcekey="txtPersonFpsResource1"/>
</div>
</div>
<div class="line">
<div class="labelcell">
<asp:Label ID="lblPersonForthName" runat="server" Text="Fourth Name: " meta:resourcekey="lblPersonForthNameResource1"/>
</div>
<div class="cell">
<asp:TextBox ID="txtPersonForthName" runat="server" MaxLength="128" Width="120px" meta:resourcekey="txtPersonForthNameResource1"/>
</div>
<div class="labelcell">
<asp:Label ID="lblPersonEthnicity" runat="server" Text="Ethnicity:" meta:resourcekey="lblPersonEthnicityResource1"/>
</div>
<div class="cell">
<asp:DropDownList ID="ddlPersonEthnicity" Width="120px" runat="server" AppendDataBoundItems="True" DataSourceID="dsPersonEthnicity" DataTextField="Ethnicity" DataValueField="EthnicityID" OnPreRender="ddlPersonEthnicity_PreRender" meta:resourcekey="ddlPersonEthnicityResource1">
<asp:ListItem Value="-1" meta:resourcekey="ListItemResource1">--Select--</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
This part seems to not won't to show up in the browser:
<div class="labelcell">
<asp:Label ID="lblPersonMaidenName" runat="server" Text="Maiden Name:" meta:resourcekey="lblPersonMaidenNameResource1"/>
</div>
<div class="cell">
<asp:TextBox ID="txtPersonMaidenName" runat="server" MaxLength="200" Width="120px" meta:resourcekey="txtPersonMaidenNameResource1"/>
</div>
How it shows up in HTML(the maiden name part):
<div class="labelcell"></div>
<div class="cell"></div>
Here is a "line" that does show up:
<div class="line">
<div class="labelcell">
<span id="lblPersonThirdName">Third Name: </span>
</div>
<div class="cell">
<input name="txtPersonThirdName" type="text" maxlength="128" id="txtPersonThirdName" style="width:120px;">
</div>
<div class="labelcell">
<span id="lblPersonFps">FPS: </span>
</div>
<div class="cell">
<input name="txtPersonFps" type="text" maxlength="200" id="txtPersonFps" style="width:120px;">
</div>
</div>

ASP.NET Server Controls that has Visible property set to false do not render to page html. Make sure that controls lblPersonMaidenName and txtPersonMaidenName are visible before page is rendered.

Related

Bootstrap grid inside asp.net repeater control

I'm using asp.net web form's. I have a grid with 8 columns. I want to make this grid responsive. So I'm trying to convert it in to a repeater control. I can put it as table and can add bootstrap css to it. But table doesn't break down to columns in smaller screen. So i want to add a bootstrap grid inside the repeater control. Any body provide me sample ui code.
<div class="row">
<div class="col-md-12 table table-bordered">
<asp:Repeater ID="rpActions" runat="server"
DataSourceID="sqlActions">
<HeaderTemplate>
<div class="row table-bordered">
<div class="col-md-1 col-sm-5 ">
Edit
</div>
<div class="col-md-2 col-sm-5">
DateCreated
</div>
<div class="col-md-2 col-sm-5">
ActionTypeID
</div>
<div class="col-md-1 col-sm-5">
AddedByUser
</div>
<div class="col-md-2 col-sm-5">
ContactID
</div>
<div class="col-md-1 col-sm-5">
Notes
</div>
<div class="col-md-1 col-sm-5">
FollowUp
</div>
<div class="col-md-1 col-sm-5">
FollowUp
</div>
</div>
</HeaderTemplate>
<ItemTemplate>
<div class="row table-bordered ">
<div class="col-md-1 border col-sm-5">Edit</div>
<div class="col-md-2 border col-sm-5">
<asp:Label ID="LabelDateCreated" runat="server"
Text='<%# Bind("DateCreated") %>'>
</asp:Label></div>
<div class="col-md-2">
<asp:DropDownList ID="DropDownList10" runat="server" DataSourceID="SqlDataSource1a" DataTextField="ActionType" DataValueField="ActionTypeID" SelectedValue='<%# Bind("ActionTypeID") %>' AppendDataBoundItems="True">
<asp:ListItem Value="" Text="">
</asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1a" runat="server" ConnectionString="<%$ ConnectionStrings:WebCRMProCS %>" SelectCommand="SELECT [ActionTypeID], [ActionType] FROM [tblActionTypes] ORDER BY [ActionType]">
</asp:SqlDataSource>
</div>
<div class="col-md-1 col-sm-5">
<asp:Label ID="LabelUser" runat="server" Text='<%# Bind("AddedByUser") %>'>
</asp:Label></div>
<div class="col-md-2 col-sm-5">
<asp:DropDownList ID="DropDownList13"
runat="server" DataSourceID="SqlDataSource1e" DataTextField="ContactFullName"
DataValueField="ContactID" SelectedValue='<%# Bind("ContactID") %>' AppendDataBoundItems="True">
<asp:ListItem Value="" Text="">
</asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1e"
runat="server" ConnectionString="<%$ ConnectionStrings:WebCRMProCS %>"
SelectCommand="SELECT [ContactID],
isnull([ContactFullName], email) as ContactFullName
FROM [tblContacts] WHERE ([CompanyID] = #CompanyID)
ORDER BY [ContactFullName]">
<SelectParameters>
<asp:ControlParameter
ControlID="detailCompany" Name="CompanyID" PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource></div>
<div class="col-md-1 col-sm-5">
<asp:Label ID="Label2" runat="server" Text='<%# Bind("Notes") %>'></asp:Label></div>
<div class="col-md-1 col-sm-5">
<asp:CheckBox ID="chkFollowup" runat="server" Checked='<%# Bind("FollowUp") %>' /></div>
<div class="col-md-1 col-sm-5">
<asp:Label ID="Label1a" runat="server"
Text='<%# Bind("DateFollowUp", "{0:d}") %>'></asp:Label> </div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>

ASP.NET Bootstrap Modal

I am quite new to ASP.NET so forgive me if I have the functionality wrong.
I am working with Bootstrap and have a button within a tab and UpdatePanel which fires a Modal.
The Modal sits behind the screen and blacks out and I can't quite work out why.
If I take the UpdatePanel out, it works. I need the UpdatePanel because it is in a tab with an action CheckBox which without the UpdatePanel sends the user back to the first tab.
<div class="tab-pane fade" id="neworder">
<asp:UpdatePanel ID="up_New_Order" runat="server">
<ContentTemplate>
<div class="checkbox">
<asp:CheckBox ID="cb_Auto_Fill" runat="server" Text="Auto fill last order" CssClass="checkbox" AutoPostBack="true" OnCheckedChanged="cb_Auto_Fill_CheckedChanged"></asp:CheckBox>
</div>
<div class="col-md-6">
<!-- New Order -->
<asp:panel class="row form-group has-feedback" id="Panel2" runat="server">
<label for="inputName" class="col-lg-4 control-label">Ordered By</label>
<div class="col-lg-8">
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:TextBox CssClass="form-control" ID="tb_Ordered_By" placeholder="Customer name" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel5" runat="server">
<label for="inputSubject" class="col-lg-4 control-label">PO No/Agency</label>
<div class="col-lg-8">
<asp:TextBox CssClass="form-control" ID="tb_Po_Number" placeholder="PO No/Agency Ref" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel13" runat="server">
<label for="inputSubject" class="col-lg-4 control-label">Payment Type</label>
<div class="col-lg-8">
<asp:DropDownList ID="ddl_Payment_Type" runat="server" CssClass="form-control dropdown"></asp:DropDownList>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel14" runat="server" Visible="false">
<label for="inputSubject" class="col-lg-4 control-label">Upload</label>
<div class="col-lg-8">
<input type="file"
style="visibility:hidden; width: 1px;height:1px"
id='${multipartFilePath}' name='${multipartFilePath}'
onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))" /> <!-- Chrome security returns 'C:\fakepath\' -->
<input class="btn btn-primary" type="button" value="Upload File.." onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
<span class="badge badge-important" ></span>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel11" runat="server">
<label for="inputSubject" class="col-lg-4 control-label">Order Notes</label>
<div class="col-lg-8">
<asp:TextBox id="tb_Order_Notes" cssClass="form-control" TextMode="multiline" Columns="50" Rows="3" runat="server" />
</div>
</asp:panel>
</div>
<div class="col-md-6">
<!-- New Order -->
<asp:panel class="row form-group has-feedback" id="Panel7" runat="server">
<label for="inputName" class="col-lg-4 control-label">Copy Contact</label>
<div class="col-lg-8">
<asp:Label ID="Label2" runat="server"></asp:Label>
<asp:TextBox CssClass="form-control" ID="tb_Copy_Contact" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel8" runat="server">
<label for="inputName" class="col-lg-4 control-label">Copy Supply</label>
<div class="col-lg-8">
<asp:TextBox CssClass="form-control" ID="tb_Copy_Supply" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel9" runat="server">
<label for="inputEmail" class="col-lg-4 control-label">Copy Tel</label>
<div class="col-lg-8">
<asp:TextBox CssClass="form-control" ID="tb_Copy_Tel" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel10" runat="server">
<label for="inputSubject" class="col-lg-4 control-label">Copy Email</label>
<div class="col-lg-8">
<asp:TextBox CssClass="form-control" ID="tb_Copy_Email" runat="server"></asp:TextBox>
</div>
</asp:panel>
<div class="row form-group">
</div>
<div class="row form-group">
<div class="col-lg-12">
<asp:Button Text="Create Order" ID="btn_Create_Order" CssClass="btn btn-primary btn-block" OnClick="btn_Create_Order_Click" runat="server" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
The modal sits just above my closing tag for Content and I call it with:
protected void btn_Create_Order_Click(object sender, EventArgs e)
{
lblModalTitle.Text = "Modal Title";
lblModalBody.Text = "Modal Body.";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal().appendTo('body');", true);
upModal.Update();
//pnlAlertBox.Visible = true;
}
Here is the modal (I am reusing it so I know it does work).
<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
I tried your code in my sample project and the bootstrap modal works correctly. I am using jquery 2.1.3
It could be that the jquery version you are using is causing the problem.

SQL Select with multiple parameters

I am trying to create a search page that would use multiple textboxes to build a query and output the results to the gridview but if the user only selects to complete some of the textboxes the select statement breaks and does not return results to the gridview. How do I cater for this? I tried only one variable but get a "Must declare the scalar variable " error.
ASP Code:
<h2>
Find Client</h2>
<div>
<fieldset class="login">
<legend>Client Detail</legend>
<div class="columns">
<div class="label">
<asp:Label ID="lblEmployeeNumber" CssClass="Smart-css_Label" runat="server">Client Number:</asp:Label>
</div>
<div class="textbox">
<asp:TextBox ID="txtClientNumber" placeholder="Client Number" runat="server" CssClass="Smart-css_Text"></asp:TextBox>
</div>
<div class="label">
</div>
<div class="textbox">
</div>
<div class="label">
<asp:Label ID="lblName" CssClass="Smart-css_Label" runat="server">Name:</asp:Label>
</div>
<div class="textbox">
<asp:TextBox ID="txtName" placeholder="Name" runat="server" CssClass="Smart-css_Text"></asp:TextBox>
</div>
<div class="label">
<asp:Label ID="lblSurname" CssClass="Smart-css_Label" runat="server">Surname:</asp:Label>
</div>
<div class="textbox">
<asp:TextBox ID="txtSurname" placeholder="Surname" runat="server" CssClass="Smart-css_Text"></asp:TextBox>
</div>
<div class="label">
</div>
<div class="textbox">
</div>
<div class="label">
</div>
<div class="textbox">
</div>
<div class="label">
<asp:Label ID="lblEmployer" CssClass="Smart-css_Label" runat="server">Client Type:</asp:Label>
</div>
<div class="textbox">
<asp:DropDownList ID="cboClientType" placeholder="Client Type" CssClass="Smart-css_Combo" runat="server">
</asp:DropDownList>
</div>
<div class="label">
<asp:Label ID="Label5" CssClass="Smart-css_Label" runat="server">Client Status:</asp:Label>
</div>
<div class="textbox">
<asp:DropDownList ID="cboClientStatus" CssClass="Smart-css_Combo" runat="server">
</asp:DropDownList>
</div>
<div class="label">
<asp:Label ID="Label4" CssClass="Smart-css_Label" runat="server">Company Name:</asp:Label>
</div>
<div class="textbox">
<asp:TextBox ID="txtCompanyName" runat="server" CssClass="Smart-css_Text"></asp:TextBox>
</div>
<div class="label">
</div>
<div class="textbox">
</div>
<div class="label">
</div>
<div class="textbox">
</div>
<div class="label">
</div>
<div class="textbox">
</div>
<div class="label">
<asp:Label ID="Label13" CssClass="Smart-css_Label" runat="server">Postal Code:</asp:Label>
</div>
<div class="textbox">
<asp:TextBox ID="txtPostcode" runat="server" CssClass="Smart-css_Text"></asp:TextBox>
</div>
<div class="label">
<asp:Label ID="lblMobileNo" CssClass="Smart-css_Label" runat="server">Mobile Number:</asp:Label>
</div>
<div class="textbox">
<asp:TextBox ID="txtMobileNo" runat="server" CssClass="Smart-css_Text"></asp:TextBox>
</div>
<div class="label">
</div>
<div class="textbox">
</div>
<div class="label">
</div>
<div class="textbox">
</div>
<div class="label">
</div>
<div class="textbox">
</div>
<div class="label">
<asp:Button ID="cmdSearch" CssClass="Smart-css_Button" runat="server" Text="Find Client"/>
</div>
<div class="textbox">
<asp:Button ID="cmdCancel" CssClass="Smart-css_Button" runat="server" Text="Cancel" />
</div>
</div>
</fieldset>
</div>
<div class= "widecolumns">
<asp:Label ID="lblMessage" runat="server" Text="Message" Visible="False"
Font-Bold="True" ForeColor="Red"></asp:Label>
</div>
<div class= "widecolumns">
<asp:GridView ID="grdclientslist" runat="server" AutoGenerateColumns="False"
CssClass="mGrid" PageSize="5">
</asp:GridView>
</div>
VB Code
Protected Sub cmdSearch_Click(ByVal sender As Object, ByVal e As EventArgs) Handles cmdSearch.Click
Dim clientNumber As String = txtClientNumber.Text
Dim name As String = txtName.Text
Dim surname As String = txtSurname.Text
Dim clientType As String = cboClientType.Text
Dim clientStatus As String = cboClientStatus.Text
Dim companyName As String = txtCompanyName.Text
Dim postCode As String = txtPostcode.Text
Dim mobileNumber As String = txtMobileNo.Text
sqlconn.SQLCmd.Parameters.AddWithValue("#clientNumber", clientNumber)
sqlconn.SQLCmd.Parameters.AddWithValue("#name", name)
sqlconn.SQLCmd.Parameters.AddWithValue("#surname", surname)
sqlconn.SQLCmd.Parameters.AddWithValue("#clientType", clientType)
sqlconn.SQLCmd.Parameters.AddWithValue("#clientStatus", clientStatus)
sqlconn.SQLCmd.Parameters.AddWithValue("#companyName", companyName)
sqlconn.SQLCmd.Parameters.AddWithValue("#postCode", postCode)
sqlconn.SQLCmd.Parameters.AddWithValue("#mobileNumber", mobileNumber)
sqlconn.ExecQuery("SELECT * FROM epm_ClientDetail WHERE (client_ID LIKE '%' + #clientNumber + '%') OR (client_Name LIKE '%' + #name + '%') OR (client_Surname LIKE '%' + #surname + '%') OR (client_Type LIKE '%' + #clientType + '%') OR (client_Status LIKE '%' + #clientStatus + '%') OR (client_CompanyName LIKE '%' + #companyName + '%') OR (client_StreetPostCode LIKE '%' + #postCode + '%') OR (client_MobileNo LIKE '%' + #mobileNumber + '%')")
If String.IsNullOrEmpty(sqlconn.Exception) Then
grdclientslist.DataSource = sqlconn.SQLDS.Tables(0)
End If
End Sub

How can i add one Jasny image upload for add new image and editing image simultaneously?

i want to use jasny image upload for adding new image and editing previous image simultaneously in asp.net webform.
i have a hidden div pan for adding and editing news , that is been visible by button clicks;
this is my News.aspx page cod:
<div id="AddNewNews" class="col-lg-12" runat="server" visible="false">
<div class="form-group">
<div class="col-lg-2">
<asp:Label ID="lblTitle" runat="server" Text="Title">
</asp:Label>
</div>
<div class="col-lg-10">
<asp:RequiredFieldValidator ID="ReqValTxtTitle"
runat="server" ValidationGroup="group1" EnableClientScript="true"
ControlToValidate="txtTitle" ForeColor="Red" Text="*" />
<asp:TextBox ID="txtTitle" runat="server" CssClass="form-control" MaxLength="100"></asp:TextBox>
</div>
<div class="clr"></div>
</div>
<div class="form-group">
<div class="col-lg-2">
<asp:Label ID="lblSummary" runat="server" Text="Summary">
</asp:Label>
</div>
<div class="col-lg-10">
<asp:RequiredFieldValidator ID="ReqValTxtSummary" EnableClientScript="true" ForeColor="Red" runat="server" ValidationGroup="group1"
ControlToValidate="txtSummary" Text="*" />
<asp:TextBox ID="txtSummary"
runat="server" onkeypress="return CheckLength();"
TextMode="MultiLine" CssClass="form-control"
MaxLength="200">
</asp:TextBox>
</div>
<div class="clr"></div>
</div>
<div class="form-group">
<div class="col-lg-2">
<asp:Label ID="lblDesc" runat="server" Text="Description">
</asp:Label>
</div>
<div class="col-lg-10">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ValidationGroup="group1" EnableClientScript="true"
ControlToValidate="CKEditor1" ForeColor="Red" Text="*" />
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="/ckeditor/" runat="server"></CKEditor:CKEditorControl>
</div> <div class="clr"></div>
</div>
<div class="form-group">
<div class="col-lg-2">
<asp:Label ID="lblImg" runat="server" Text="Select Picture">
</asp:Label>
</div>
<div class="col-lg-2">
<div class="fileinput <%=Session["statusNE"]%>" data-provides="fileinput" data-name="NewsImg">
<input type="hidden" name="NewsImg" value="1" runat="server" />
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="~/Content/images/200x150.png" alt="No Image">
</div>
<div class="fileinput-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
<img src="#" runat="server" id="NewsImageUrl" />
</div>
<div style="text-align: center;">
<span class="btn btn-default btn-file"><span class="fileinput-new">Select</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="NewsImg" id="NewsImg" runat="server">
</span>
Remove
</div>
</div>
</div>
</div>
Session["statusNE"] shows "fileinput-exists" or "fileinput-new";
but in adding new news mode, shows 2 box for image;
how can i manage it?
Thanks.
<div class="controls">
<div class="thumbnail" style="width: 291px; height: 200px;">
<asp:Image ID="myimage" runat="server" Height="200px" />
</div>
</div>
<div class="space10">
</div>
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<i class="icon-file fileupload-exists"></i><span class="fileupload-preview"></span>
</div>
<span class="btn btn-file"><span class="fileupload-new">Select file</span> <span
class="fileupload-exists">Change</span>
<input id="myFile" type="file" runat="server" onchange="ShowPreview(this)">
</span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload" >Remove</a>
</div>
</div>
function ShowPreview(input) {
debugger;
if (input.files && input.files[0]) {
var ImageDir = new FileReader();
ImageDir.onload = function (e) {
$('#myimage').attr('src', e.target.result);
}
ImageDir.readAsDataURL(input.files[0]);
}
} `
protected HtmlInputFile myFile;
public void fileuploadImage()
{
Guid name = Guid.NewGuid();
if (IsPostBack)
{
if (myFile.PostedFile != null)
{
// File was sent
var postedFile = myFile.PostedFile;
int dataLength = postedFile.ContentLength;
byte[] myData = new byte[dataLength];
postedFile.InputStream.Read(myData, 0, dataLength);
string ext = Path.GetExtension(postedFile.FileName);
string filename = Path.GetFileName(postedFile.FileName);
// name = Guid.Parse(filename);
postedFile.SaveAs(Server.MapPath("ProfileImage/" + name + ext));`

how to make Responsive DataList asp.net

I have an Asp.net DataList control in my page. It is currently having repeatcolumns set to 4 which will give me 4 columns in each row. But I want to make this responsive and set the value to 1 for smaller screen sizes. Below is my asp.net control:
<asp:DataList runat="server" RepeatDirection="Horizontal" RepeatColumns="4" ID="dd" class="vex-res">
How can I achieve this?
You cannot make DataList to be responsive, because it renders as Table.
Instead, you need to use ListView with bootstrap (or some other responsive framework).
<asp:ListView ID="ListView1" runat="server" ...>
...
<ItemTemplate>
<div class="row">
<div class="col-md-4"><%# Eval("Name") %></div>
<div class="col-md-4"><%# Eval("Email") %></div>
<div class="col-md-4"><%# Eval("Address") %></div>
</div>
</ItemTemplate>
</asp:ListView>
This Work My Home :
<asp:DataList ID="dlCustomers" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" CssClass="row">
<ItemTemplate>
<%-- <div class="row">--%>
<div class="col-sm-4"><!--THUMBNAIL#2-->
<div class="panel-body">
<span class="label label-warning"><%# Eval("status")%></span>
<div class="thumbnail label-success">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/" +Eval("image1").ToString().Trim() %>' Width="150px" Height="150px" />
<div class="caption"><h4>Rp.<small> <%# Eval("harga")%></small></h4>
<strong><%# Eval("judul") %></strong>
<p>
<small>LT:<strong> <%# Eval("luastanah")%> m2</strong> </small> <small> LB : <strong> <%# Eval("luasbangunan")%> m2</strong> </small>
<small>Setifikat : <strong><%# Eval("sertifikasi")%></strong> </small> <br />
<small> Kamar : <strong><%# Eval("kamartidur")%></strong> </small><br />
<small> Kamar Mandi : <strong><%# Eval("kamarmandi")%></strong> </small>
</p>
Lihat Details
</div>
</div>
</div>
</div>
<%--</div>--%>
</ItemTemplate>
</asp:DataList>
Responsive using bootstrap 3.3.6 ..
Coming to this a little late but I found an asp:repeater works well and no additional CSS is required to get the layout repeating horizontally.
<div class="container">
<div class="row">
<asp:Repeater ID="myRepeater" runat="server" DataSourceID="myDataSourceID">
<ItemTemplate>
<div class="col-sm-4">
<%# Eval("itemID")%><br />
<%# Eval("itmName")%>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
I realise that this will result in the total columns in one row adding up to more than 12 but as this will just wrap to the line underneath it shouldn't really matter.
Reference: https://stackoverflow.com/questions/23502342/bootstrap-3-grid-does-it-really-matter-how-many-columns-are-in-a-row
You can also try setting RepeatLayout="Flow". That will cause your datalist to render as a series of <div> elements, which will behave more responsively.
<asp:DataList ID="DataList1" runat="server" OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
<ItemTemplate>
<div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Name") %></div>
<div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Email") %></div>
<div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Address") %></div>
<div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Phone") %></div>
</ItemTemplate>
</asp:DataList>
<asp:DataList ID="uxPosts" runat="server" OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
<ItemTemplate>
<a id="uxLink" runat="server" class="txt_link">
<div class="col-xs-4 col-sm-4 col-md-4 " style="text-align:center;" >
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 " style="text-align:center;" >
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 " style="text-align:center;" >
<asp:Label ID="Label4" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>
</div>
</a>
</ItemTemplate>
</asp:DataList>
You can do it with asp literal, write the code in the string and add it to literal,
suppose you want to show items dynamically
you can do it this way
Add html
<div class="any_css_class">
<div class="any_css_class2">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
</div>
and in your cs file
string htmlcode = ""; //code you want in your html
foreach (FetchedDetails fd in yourListOfItems)
{
htmlcode += "<div class='content content-1' onclick=\"dosomething('" + fd.itemId + "')\"> " +
"<div class='fab fa-any_icon'></div> " +
"<h2>" + fd.anyAttribute + "</h2> ";
}
Literal1.Text = htmlcode; //add code to literal
This will do it. It will be responsive but you have to define your css properly :)
<asp:DataList ID="uxPosts" runat="server" OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
<ItemTemplate>
<a id="uxLink" runat="server" class="txt_link">
<div class=" col-xs-6 col-sm-4 col-md-3 col-lg-3 " style="text-align:center;" >
<div class="pnlborde">
<div class="encabezadofondo">
<asp:Label ID="Label2" runat="server" Height="38px" width="150px" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>
</div>
<br />
<asp:Image ID="uxImage" runat="server" width="65%" Height="90%" align="center" />
<br /><br />
</div>
<br />
</div>
</a>
</ItemTemplate>
</asp:DataList>

Resources