We Keep Coding

Changing content of variable using jquery?

I am currently working with an Sitecore MVC project, in which i have some problems understanding how I can alter my model, which currently consist two of a string tech and string add dynamically using jQuery.
My idea was to have the index file like this
var global_var1 = "";
var global_var2 = "";
<div class = "upper">
<div class= "tech_field" >
#Model.tech = global_var1
</div>
<div class= "add_field" >
#Model.add = global_var2
</div>
</div>
And then with the jQuery do something like
$('upper').find('tech_field')
But how do i exactly modify the value or the variable, i know how to find the div which contains the value, but not the exact variable.

#Model is a variable defined only on the server-side when the page is generated. On the client side in the browser, you do not have access to server-side variables.
#Model.tech renders the tech property value at that location in the page.
So this code:
<div class= "tech_field" >
#Model.tech = global_var1
</div>
Will render this if #Model.tech contains "Content of the tech property":
<div class= "tech_field" >
Content of the tech property = global_var1
</div>
If you want to use JavaScript to render your model property values, you can do it like this:
<script>
// Sets JavaScript variables with the content of server-side model property values
var model_tech = "#Model.tech";
var model_add = "#Model.add";
</script>
<div class="upper">
<div class="tech_field"></div>
<div class="add_field"></div>
</div>
<script>
$('.tech_field').text(model_tech); // Sets the DOM element value to the content of the JavaScript variable
var techValueFromDom = $('.tech_field').text(); // Reads the DOM to read the text.
</script>
However, there is no easy way to call Sitecore to update data stored in Sitecore items from JavaScript code.

Select an ID if it's a number?

Is there a way to select a list item from an aspx file from a .cs file to make the <li> visible. The ID for the <li> are numbers.
The reason why they are numbers is because this page is a custom view editor for the website, it is updating a database and then loads the correct view for the user. I need to hide some items for certain users on this page.
Snippet from aspx page:
<div id="connectedSortableLists">
<ul id="unselected" class="connectedSortable">
<li class="ui-state-highlight" id="0">Log #</li>
<li class="ui-state-highlight" id="19">Log date</li>
</ul>
</div
I've tried adding in runat="server" to various places however had no luck.
Is there a way to select like for a grid-view like : grdv_dummy.Columns[29].Visible = false; ?
I want to select the li by an ID to set the visibility to false to do it server side based on user. When the new custom view is saved, database will be updated with the id number. When I try with id="item" the desired page tries to load I get the error Input string was not in a correct format; due to the database having an entry of 'item'.
I feel as though i'm overlooking something although more likely completely wrong.
Thank you for your time

You will definitely need runat=server on your li elements (or ul element). Then you need to add letters to your ids - you can't have just numbers as an id. So something like "item". Then in you .cs file use something like:
private HtmlElement FindListItem(int id)
{
HtmlElement listItem = this.FindControl("item" + id.ToString()) as HtmlElement;
if (listItem != null && listItem.TagName == "li")
{
return listItem;
}
return null;
}
Basically FindControl() is what you need. Then you can use it like:
var item = FindListItem(19);
if (item != null)
{
item.Visible = false;
}
Oh an depending on how you've setup your code, you'll use it either in Page_Load or onPreRender...

you cannot directly access it in server side.However, you can call javascript function from server side which can enable\disable it.
At server side
string jsFunc = "DisableHtmlLi(" + iterator + ")";
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "DisableHtmlLi", jsFunc, true);
At Client side
<script type="text/javascript" language="javascript">
function DisableHtmlLi(index) {
var element = document.getElementById(index);
element.visible= false;
}
</script>

Managed to find a way round the problem. I know that li shouldn't be put in other li , but it worked for me.
ASPX Altered
<div id="connectedSortableLists">
<ul id="unselected" class="connectedSortable">
<li class="ui-state-highlight" id="0">Log # </li>
<li class="ui-state-highlight" id="19">Log date</li>
<li runat="server" id="full" visible="false">
<li class="ui-state-highlight" id="32">Days Country</li>
<li class="ui-state-highlight" id="33">Days total</li>
</li>
</ul>
</div
.CS Page
full.Visible = true;

fetching ul li items under div class using html agility pack

<div class="outer">
<div class="divOne"></div>
<div class="divContent">
<h3>SomeTitle</h3>
<h4>SomeSubtitle</h4>
<ul>
<li>SomeUrl
<span> Nr of records under this url </span>
</li>
</ul>
<h4>Some Other Subtitle</h4>
<ul>
<li>SomeUrl
<span> Nr of records under this url </span>
</li>
</ul>
</div>
</div>
Once more, I want to fetch all unordered list items under above html structure
I'm able to fetch divContent class content using
var regs = htmlDoc.DocumentNode.SelectSingleNode(#"//div[#class='outer']");
var descendant = regs.Descendants()
.Where(x => x.Name == "div" && x.Attributes["class"].Value == "divContent")
.Select(x => x.OuterHtml);
now I need expression to fetch ul li items.

This should work fine:
IEnumerable<string> listItemHtml = htmlDoc.DocumentNode.SelectNodes(
#"//div[#class='outer']/div[#class='divContent']/ul/li")
.Select(li => li.OuterHtml);
Example: https://dotnetfiddle.net/fnDPLB
Update based on comments below:
If you want to find only <li> elements belonging to <ul> elements that are direct siblings of an <h4> element with the value "SomeSubtitle", here's an XPath expression that should work:
//div[#class='outer'] // Get div.outer
/div[#class='divContent'] // under that div, find div.divContent
/h4[text()='SomeSubtitle'] // under div.divContent, find an h4 with the value 'SomeSubtitle'
/following::ul[1]/li // Get the first ul following the h4 and then get its li elements.
Example: https://dotnetfiddle.net/AfinpV

Extract text from a div

I am trying to make a DropDownList using divs and jquery (so that I can style it as I want)...and its working but the problem is I cant get the selected value from the list..
After selection of the option I am copying the selected value into the a div.. and I want to extract this using c# (in .aspx.cs page)... I've tried to do it using string builder and innerHtml(after adding runat="server" to the div).. but it doesn't work ...code is as follows
.aspx Page:
<div class="ddl">
<div id="lowertriangle" class="lowertriangle"></div>
<div id="uppertriangle" class="uppertriangle"></div>
<div id="label" class="labeldiv_dd" runat="server"></div>//***This is the div from which I want to extract value***
<div id="options" class="optionsidv_dd">
<ul id="options_ul">
<li id="0">Select One Option</li>
<li id="1">Option 1</li>
<li id="2">Option 2</li>
<li id="3">Option 3</li>
<li id="4">Option 4</li>
<li id="5">Option 5</li>
</ul>
</div>
</div>
aspx.cs page
Method 1 that I tried:
string sel_text = label.InnerHtml;
display_sel_value.Text = sel_text.ToString();
2nd method:
var sb = new StringBuilder();
label.RenderControl(new HtmlTextWriter(new StringWriter(sb)));
string s = sb.ToString();
Kindly point out my mistakes and help me in this regard(in extracting innerHTML of the div that is).
Thanks

No, putting content in a div won't work.
Your example isn't complete enough to see all that happens, but let's assume that you're in a standard <form>, you're setting the div's inner HTML to a value with Javascript and then you're submitting in the standard way.
Then one way to do what you want is to use a hidden input and setting its value attribute instead of its contents.
<input id="label" class="labeldiv_dd" runat="server" type="hidden">
In the codebehind, the C# can retrieve the value from this control after submitting with the .Value property.

Ok guys thx for your replies..I found a way around the problem...I used HiddenField control to store the selected value using jQuery like so
$("#options_ul li").click(function () {
var text = this.innerHTML;
***$('#<%= selectedvalue.ClientID %>').val(text);***
$("#options_ul li").css("background-color", "#c2c2c2");
$(this).css("background-color", "white");
//var prev = this.id;
//document.getElementById("label").innerHTML = text;
toggleHeight();
});
and then accessed it server side using
selectedvalue.value;
PS: "selectedvalue" is id of the hiddenfield control

Dynamic loading a list from a model MVC 4

so I'm still pretty new in ASP.net MVC design. I am facing a small problem, which might have already been answered, but don't seem to find an answer that will fit my purpose. Here is what's happening:
Say I have a model with 2 links: Category & Item, and it's a 1 to many relation. What I want to do is generate a list containing Category.Title (which I have completed, using the code following) and clicking on the each list item will generate a list of all Item.Title values of that category. The base idea of the html is:
<div id="cat"><!--float = left-->
<ul>
<li>List<li>
</ul>
</div>
<div id="item"> <!--float = right -->
<ul>
<li>List<li>
</ul>
</div>
Here is how everything is linked up so far:
public ActionResult Equipment()
{
ViewBag.Cat= getCat(1); // Will return a list of categories of ID 1
return View();
}
As for the view:
#{ List<X.Models.Category> catX = ViewBag.Cat; }
BODY:
<div id="pl_categories">
<ul id="pl_ec_ul">
#foreach (X.Models.Category item in catX)
{
<li id="pl_ec_li">
<div id="pl_ec_liItem">
#item.catTitle
</div>
</li>
}
</ul>
</div>
<div id="pl_values">
<ul id="pl_ev_ul">
<li id="pl_ev_li">
<div id="pl_ev_liItem">
???
</div>
</li>
</ul>
I have seen a bunch of examples, but they all involve dropdowns or what not. Here are a quick checklist of what I am trying to accomplish:
On page laod, default selected category will be the first in the list. If list is null, a simple "No Categories" is shown. Edit: if the category is empty, it will show No Items in Category.
On clicking an item in the category it will show the items of that category under pl_values.
I have tried to make this is small as possible but there are a lot more factors I need to consider. However, if I can solve this, I am certain to figure out the rest. If something however is not clear, please let me know and I can try and clarify it. Any help will be appreciated. Thank you.

For your item 1, you could try something like this (assuming your OK using jQuery):
$(document).ready(function() {
var count = $("#pl_ec_ul li").length;
if(count <= 0) {
$("#pl_categories").html("<p>No Categories</p>");
}
});