.Net Class: 2012

The FCK Editor became the CK Editor, I guess they opted to drop the F over adding a U.

Step 1 : Change to Text Area

You should have something like this in your Create and Edit Views

@Html.EditorFor(model => model.Text)

Lets change that to :

@Html.TextAreaFor(model => model.Text, new { @class = “adminRichText” })

Step 2 : Widen the text area

In your Site.Css file add the folowing to widen the text area :

.adminRichText

{

width:450px;

}

Step 3 : Add the CK Editor (formerly FCK Editor) to your project

a. Download here

b. Create a ‘Javascript’ folder under ‘Content’ in your website.

c. Extract to /Javascript/Content.

Step 4 : Include the scripts in your View

Below the validation scripts add

Step 5 : Turn the text area into a Rich Text Box

At bottom of view after controls are initialized add:

jQuery(“.adminRichText”).ckeditor();

</script>

Step 6 : Enable Post Back of Rich Text for your Edit and Create Methods in your controller class

[HttpPost, ValidateInput(false)]

public ActionResult Create(AreaText areaText)

[HttpPost, ValidateInput(false)]

public ActionResult Edit(string id, FormCollection collection)

Step 7: Use Html.Raw to display the data

On your index view update the output area to decode the html.

item.Text

becomes

@Html.Raw(item.Text)

You can done this using following setting :

“In your CKEditor config file add the following line:

config.htmlEncodeOutput = true;”

How to Use AutoComplete textbox in Asp.net

The following are the step to use AutoComplete textbox in Asp.net by using JQuery.

1.First design the table name Category with two fields Id,Category as follows:

2.Fill the Category details in table which you want like the below:

3. Open VS2010 and FileàNewàEmpty WebsiteàGive the name as JQueryAutoComplete.

4. Select solutionàRight clickà Add new Item àselect WebFormàDefault.aspx

5. Design the form with two fields one is label and one is Textbox to enter text as follows:

6.Then write the following code in Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>AutoComplete Text Box with jQuery</title>

$(document).ready(function() {

SearchText();

});

function SearchText() {

$(".auto").autocomplete({

source: function(request, response) {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "Default.aspx/GetAutoCompleteData",

data: "{'CategoryName':'" + document.getElementById('txtCategory').value + "'}",

dataType: "json",

success: function(data) {

response(data.d);

error: function(result) {

alert("Error Occurred");

}

});

}

});

}

</script>

</head>

<body>

<label for="tbAuto">Enter Category Name: </label>

</div>

</form>

</body>

</html>

7. Write the following code in Default.aspx.cs file:

using System;

using System.Collections.Generic;

using System.Data.SqlClient;

using System.Web.Services;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static List<string> GetAutoCompleteData(string CategoryName)

{

List<string> result = new List<string>();

using (SqlConnection con = new SqlConnection("Data Source=Naresh;Integrated Security=true;Initial Catalog=dbname"))

{

using (SqlCommand cmd = new SqlCommand("select Category from Emergency_Category where Category LIKE '%'+@CategoryText+'%'", con))

{

con.Open();

cmd.Parameters.AddWithValue("@CategoryText", CategoryName);

SqlDataReader dr = cmd.ExecuteReader();

while (dr.Read())

{

result.Add(dr["Category"].ToString());

}

return result;

}

8.Then build the application and run it, you will get output and type any letter in textbox then the output will be like below:

In the above I entered ‘a’ letter in textbox then it is showing all the details of related to ‘a’ from database table Category.

In this way we can implement JQuery AutoComplete in Asp.net.

Thank You…….

.Net Class

Pages

Sunday, July 22, 2012

How to implement CKEditor in MVC3 and the Razor Engine

How to Use AutoComplete textbox in Asp.net