Sunday, June 28, 2020

How to "visible" and "hidden" bindings in Knockout JS ?

The "visible" and "hidden" bindings

Purpose

The visible and hidden bindings cause the associated DOM element to become hidden or visible according to the value you pass to the binding.

Example

<div data-bind="visible: shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>
 
<script type="text/javascript">
    var viewModel = {
        shouldShowMessage: ko.observable(true) // Message initially visible
    };
    viewModel.shouldShowMessage(false); // ... now it's hidden
    viewModel.shouldShowMessage(true); // ... now it's visible again
</script>

Parameters

Main parameter
- When the parameter resolves to a false-like value (e.g., the boolean value false, or the numeric value 0, or null, or undefined), the visible binding sets yourElement.style.display to none, causing it to be hidden. This takes priority over any display style you’ve defined using CSS.
- When the parameter resolves to a true-like value (e.g., the boolean value true, or a non-null object or array), the visible binding removes the yourElement.style.display value, causing it to become visible.
  Note that any display style you’ve configured using your CSS rules will then apply (so CSS rules like x { display:table-row } work fine in conjunction with this binding).
The hidden binding works oppositely—when the parameter is true, it hides the element by setting the display style to none; and when the parameter is false, it removes the display style.
If this parameter is an observable value, the binding will update the element’s visibility whenever the value changes. If the parameter isn’t observable, it will only set the element’s visibility once and will not update it again later.
Additional parameters
- None

Note: Using functions and expressions to control element visibility

You can also use a JavaScript function or arbitrary JavaScript expression as the parameter value. If you do, KO will run your function/evaluate your expression, and use the result to determine whether to hide the element.

For example,

<div data-bind="visible: myValues().length > 0">
    You will see this message only when 'myValues' has at least one member.
</div>
 
<script type="text/javascript">
    var viewModel = {
        myValues: ko.observableArray([]) // Initially empty, so message hidden
    };
    viewModel.myValues.push("some value"); // Now visible
</script>

Sunday, April 5, 2020

RichTextbox example or sample in asp.net or how to insert or store richtextbox data into database and display richtextbox data from database in gridview using asp.net

Today I am writing this post to explain about freely available richtextbox. Previously I worked on one social networking site for that we got requirement to use richtextbox at that time we search so many websites to use richtextbox but we didn’t find useful ones. Recently I came across one website and I found one free available richtextbox. We can validate and we can use richtextbox very easily and by using this richtextbox we can insert data in different formats like bold, italic and different color format texts and we can insert images also. To use free Richtextbox download available dll here FreeTextbox . After download dll from that site create one new website in visual studio and add FreeTextbox dll reference to newly created website after that design aspx page like this

After that Design your aspx page like this

<%@ Register Assembly="FreeTextBox" Namespace="FreeTextBoxControls" TagPrefix="FTB" %>

<title>Richtextbox Sample</title>

function validate() {

var doc = document.getElementById('FreeTextBox1');

if (doc.value.length == 0) {

alert('Please Enter data in Richtextbox');

return false;

}

</script>

</head>

<body>

<div>

<table>

<tr>

<td>

<FTB:FreeTextBox ID="FreeTextBox1" runat="server">

</FTB:FreeTextBox>

</td>

<asp:GridView runat="server" ID="gvdetails" AutoGenerateColumns="false">

<asp:TemplateField HeaderText="RichtextBoxData">

<asp:Label ID="lbltxt" runat="server" Text='<%#Bind("RichtextData") %>'/>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</td>

</tr>

</table>

</div>

<asp:Button ID="btnSubmit" runat="server" OnClientClick="return validate()"

Text="Submit" onclick="btnSubmit_Click" /><br />

<asp:Label ID="lbltxt" runat="server"/>

</form>

</body>

</html>

After that run your application richtextbox appears like this

Now our richtextbox is ready do you know how we can save richtextbox data into database and which datatype is used to save richtextbox data and do you know how to display richtextbox on our web page no problem we can implement it now.

To save richtextbox data we need to use datatype nvarchar(MAX) now Design table like this in your SQL Server database and give name as RichTextBoxData

Column Name	Data Type	Allow Nulls
Id	Int(Set Identity=true)	No
RichTextData	nvarchar(MAX)	Yes

After that add following namespaces in code behind

using System.Data;

using System.Data.SqlClient;

Now write the following code in code behind

SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");

protected void Page_Load(object sender, EventArgs e)

{

if(!IsPostBack)

{

BindGridview();

}

protected void BindGridview()

{

con.Open();

SqlCommand cmd = new SqlCommand("select RichTextData from RichTextBoxData", con);

SqlDataAdapter da = new SqlDataAdapter(cmd);

DataSet ds = new DataSet();

da.Fill(ds);

gvdetails.DataSource = ds;

gvdetails.DataBind();

}

protected void btnSubmit_Click(object sender, EventArgs e)

{

con.Open();

SqlCommand cmd = new SqlCommand("insert into RichTextBoxData(RichTextData) values(@Richtextbox)", con);

cmd.Parameters.AddWithValue("@Richtextbox", FreeTextBox1.Text);

cmd.ExecuteNonQuery();

con.Close();

FreeTextBox1.Text = "";