ASP. net mvc about the infinite interaction between Ajax and Jquery, mvcjquery

ASP. net mvc about the infinite interaction between Ajax and Jquery, mvcjquery

--- Restore content start ---

In the first blog post, the goal of posting a blog post is to consolidate your own technologies and share them with you. I hope you can give me more comments on poor writing. Do not spray for old drivers

 

Data structure ()

NewsTypeId: News ID,

NewsTypeName news name

NewsTypeParentId parent ID

 

Background language: ASP. NET MVC4

 

Background code:

/// <Summary>

/// List set in JSON format

/// </Summary>

/// <Returns> </returns>

Public JsonResult FnNewsTypeList ()

{

Int NewsTypeParentId =-1;

If (! String. IsNullOrEmpty (Request ["NewsTypeParentId"])

{

NewsTypeParentId = Convert. ToInt32 (Request ["NewsTypeParentId"]);

}

Maticsoft. BLL. NewsType NTbll = new Maticsoft. BLL. NewsType ();

StringBuilder strWhere = new StringBuilder ();

If (NewsTypeParentId! =-1)

{

StrWhere. AppendLine ("AND NewsTypeParentId = '" + NewsTypeParentId + "'");

}

List <Maticsoft. Model. NewsType> NTList = NTbll. NewsTypeList (strWhere. ToString ());

Return Json (NTList );

}

 

 

Page Layout:

<Div class = "form-group">

<Label class = "col-sm-3 control-label"> type: </label>

<Div class = "col-sm-8" id = "cat">

<Select id = "NewsTypeParentId_0" onchange = "FirstChange (0) "name =" NewsTypeParentId "class =" form-control "aria-describedby =" firstname-error "aria-invalid =" true ">

<Option value = "0"> select </option>

<Option value = "1"> 1 </option>

</Select>

</Div>

</Div>

 

 

Jquery language:

Jquery code:

// When the page is loaded for the first time, the parent level is the highest level.

<Script>

$ (Function (){

$. Ajax ({

Type: "POST ",

Url: "/NewsType/FnNewsTypeList ",

Data :{

NewsTypeParentId: 0

},

DataType: "JSON ",

Success: function (data ){

Var SelectArray = new Array ();

SelectArray. push ("<option value = \" 0 \ "> select </option> ")

For (var I = 0; I <data. length; I ++ ){

// Concatenate an Html page using Array

SelectArray. push ("<option value = \"");

SelectArray. push (data [I]. NewsTypeId );

SelectArray. push ("\"> ");

SelectArray. push (data [I]. NewsTypeName );

SelectArray. push ("</option> ");

}

// Search for append data of the highest level category

Var SelectDom = $ ("[name = NewsTypeParentId]: eq (0 )")

SelectDom. find ("option"). remove ()

// Join all Html content in Array

SelectDom. append (SelectArray. join (""))

}

})

})

 

 

// The trigger time when the drop-down box is changed

ThisId is the Id attribute of the current Select

ChildId is the ID attribute of the next Select level of the current Select.

 

FirstChange is the first event to be executed when the drop-down box changes

Function FirstChange (ThisId ){

Var ChildId = parseInt (ThisId) + 1;

SecondChange (ThisId, ChildId)

}

 

// SecondChange is used to find all the next N-level Select statements under the selected statement. If yes, all the lower-level Select statements are removed first.

 

Function SecondChange (ThisId, ChildId ){

$ ("# NewsTypeParentId _" + ThisId)

Var ParentVal = $ ("# NewsTypeParentId _" + ThisId). val ();

// While LOOP determines whether the next select exists. If yes, delete it until it does not exist.

DoChildId = ChildId;

Do {

If ($ ("# NewsTypeParentId _" + doChildId). length> 0 ){

$ ("# NewsTypeParentId _" + doChildId). remove ();

DoChildId ++;

} Else {

Break;

}

} While (1)

If (ParentVal! = ''){

// When the selected Select value exists, all the Select values of its subordinates are clear and the data is called again to generate

NewsTypeParentId (ParentVal, ChildId );

}

}

// Ajax reads data for append generation

Function NewsTypeParentId (ParentVal, ChildId ){

If (ParentVal! = 0 ){

$. Ajax ({

Type: "POST ",

Url: "/NewsType/FnNewsTypeList ",

Data :{

NewsTypeParentId: ParentVal

},

DataType: "JSON ",

Success: function (data ){

// The returned data is in JSON format. When data exists, it indicates that there are sub-levels for data processing and Html generation.

// The ID attribute value of Select is NewsTypeParentId _? Starting from level 1, the order is 0, 1, 2, 3, 4...

If (data. length> 0 ){

Var SelectArray = new Array ();

SelectArray. push ("");

SelectArray. push ("<select id = \" NewsTypeParentId _");

SelectArray. push (ChildId );

SelectArray. push ("\" onchange = \ "FirstChange (");

SelectArray. push (ChildId );

SelectArray. push (") \" name = \ "NewsTypeParentId \" class = \ "form-control \"");

SelectArray. push ("aria-describedby = \" firstname-error \ "aria-invalid = \" true \ "> ");

SelectArray. push ("<option value = \" 0 \ "> select </option> ")

For (var I = 0; I <data. length; I ++ ){

SelectArray. push ("<option value = \"");

SelectArray. push (data [I]. NewsTypeId );

SelectArray. push ("\"> ");

SelectArray. push (data [I]. NewsTypeName );

SelectArray. push ("</option> ");

}

SelectArray. push ("</select> ");

// Append the Select statement to the DIV end.

$ ("# Cat"). append (SelectArray. join (""))

}

}

})

}

}

 

 

 

Some data processing is performed when Jquery finally uploads parameters to add data.

// ParentVal is the value of the last Select. If no item is selected, Select the data of the last Select level.

Var ParentVal = $ ("[name = NewsTypeParentId]: last"). val ();

If (ParentVal = 0 ){

// Search for the index of the last Select statement

// Index-1

Var SelectIndex = $ ("[name = NewsTypeParentId]: last"). index ();

SelectIndex = SelectIndex-1;

ParentVal = $ ("[name = NewsTypeParentId]: eq (" + SelectIndex + ")"). val ();

}

</Script>

--- Restore content end ---