Need to use the Class defined in 'Control' page in JQuery - MVC2

This is my control page, have class called AboutModels

public ActionResult About()
{
    AboutModels ObjAM = new AboutModels();
    List<PollOption> polloptions = new List<PollOption>();
    polloptions = ObjAM.dbValue();
    ViewData["polloptions"] = polloptions.ToList();
    return View();
}

I want to use this class into parse i mention (Need to Insert Object here)of this JQuery page

function Button1_onclick() {
    var currentWidth = parseInt($(".bgDiv").css("width")); //Getting the curent width.

    alert(currentWidth);
    $("**Need to Insert Object here**").css("width", currentWidth + 20 + "px");  // Adding 20px to the current width.
}

Please advise.

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">.
    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

        $(document).ready(function () {
            alert("jQuery page");
            $(".easy_editor").css("background-color", "Red"); // Here im setting the background color of the div with className changingDIV
            $(".easy_editor").css("width", 0);

            $('#myButton').live('click', function () {
                var currentWidth = parseInt($(".bgDiv").css("width")); //Getting the curent width.
                var abc = '<%=Model.AboutModels%>';
                alert(currentWidth);
                $(".easy_editor").css("width", currentWidth + 20 + "px");  //I want to use Hello_World_MVC.PollOption> class instead of easy_editor
            });
        });

    </script>

    <% using (Html.BeginForm()) { %>

        <h2>About</h2>
        <p>
            <input value="Enter the value" />
            <input type="submit" value="ClickHere" />
            <%--
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
            --%>
        </p>

        <table>
        <tr>
            <td>
                <% foreach (var obj in (List<Hello_World_MVC.PollOption>)ViewData["polloptions"]) { %>
                    //Here is my dynamic class I want to use this same class to the above jquery - Instead of .bgDiv
                    <%-- <div class="<%= obj.OptionID + "1" %>">--%>
                    <div class="bgDiv">
                        <input type="checkbox" name="SelectedObject" value="<%=obj.OptionID%>"/>
                        <%= obj.OptionName %>

                    </div>
                <% } //foreach %>
                <input id="myButton" type="button" />
 开发者_如何学Go           </td>
        <%-- <%=Html.CheckBox("<%=obj.OptionName%>",  --%>
        </tr>
        </table>
    <% } //using (endform) %>
</asp:Content>

I still don't understand what exactly you are after... but I'll try my best.

If you do something like this:

<% foreach (var obj in (List<Hello_World_MVC.PollOption>)ViewData["polloptions"]) { %>
    <div id="checkBoxDiv<%= obj.OptionID %>" class="bgDiv">
        <input type="checkbox" name="SelectedObject" value="<%=obj.OptionID%>"/>
        <%= obj.OptionName %>
    </div>
<% } %>

You should get a whole bunch of divs with different ids (e.g. 'checkBoxDiv1', 'checkBoxDiv2', ... 'checkBoxDivN') but they will all have the same class - 'bgDiv'.

Now if you want to get all the divs in jQuery you would do:

$('.bgDiv')

But if you want an individual div, you can use the id. E.g.

$('#checkBoxDiv4')

But if you want to get the checkBox by id inside the button click, there needs to be more context because the button is outside of the loop and doesn't have any idea of each input div.

EDIT: To increase the width of each div by 10px starting at 10px you can do this:

$('.bgDiv').each(function (index) {
    var newWidth = (index + 1) * 10;
    $(this).width(newWidth);
});