Home/ Questions/Q 8052251
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T07:30:02+00:00

Experienced .Net developer but a complete ASP MVC (and web dev in general) novice.

  • 0

Experienced .Net developer but a complete ASP MVC (and web dev in general) novice. I’m looking for best practice architecture suggestions for how I should accomplish the following.

I have three jQuery-UI tabs: the first has an input textbox: <input type="text" name="username" \>. The others are loading a different page via AJAX (implicitly using jQuery) but need to know the value of this input field. How can I retrieve this value from the ASP MVC Controller of tab 2 or 3? Is this fundamentally a bad approach?

~/Views/Shared/_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @RenderSection("head", required: false)
</head>
<body>
    @RenderBody()
</body>
</html>

~/Views/Demo/Index.cshtml:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section head
{
    <link rel="stylesheet" href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" />
    <script src="@Url.Content("~/Scripts/jquery-1.6.2.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")"></script>
    <script>
        $(function() {
            $("#tabs").tabs();
        });
    </script>
}

<div id="tabs">
    <ul>
        <li><a href="#Tab1">Tab 1</a></li>
        <li><a href="/Tab2">Tab 2</a></li>
        <li><a href="/Tab3">Tab 3</a></li>
    </ul>
    <div id="Tab1">
        <p>Want to be able to get the value of the input field below from Tab2 and Tab3</p>
        <input type="text" name="username" />
    </div>
</div>

~/Controller/Tab2Controller.cs:

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class Tab2Controller : Controller
    {
        public ActionResult Index()
        {
            //  I want to replace this line with one that takes the value of
            //  the input text box and queries the model for the real data
            ViewBag.MyList = new[] { "1", "2", "3" };
            return View();
        }
    }
}

~/Views/Tab2/Index.cshtml

@{
    Layout = null;
}

<ul>
    @foreach (var obj in ViewBag.MyList)
    {
        <li>@obj</li>
    }
</ul>

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change the controller action to receive the username. 

    public class Tab2Controller : Controller
{
   public ActionResult Index(string userName)
   {
       //  I want to replace this line with one that takes the value of
       //  the input text box and queries the model for the real data
        ViewBag.MyList = new[] { "1", "2", "3" };

        return View();
    }
}

    Update the href of tabs (2 & 3) on select event.

    $(function() {
   $("#tabs").tabs({
      select: function(event, ui) {
          if(ui.index == 1 || ui.index == 2) // if the tab is 2 or 3.
          {
            // select the user name
            var username = $("#Tab1 input[name='username']").val();                                

            if(username){
                var url = "/Tab" + (ui.index + 1) + "?userName=" + username;
                $("#tabs").tabs( "url" , ui.index , url );
            }
          }
      }
   });
});
    • 0