1

经验丰富的 .Net 开发人员，但也是一个完整的 ASP MVC（以及一般的 Web 开发人员）新手。我正在寻找关于我应该如何完成以下任务的最佳实践架构建议。

我有三个 jQuery-UI 选项卡：第一个有一个输入文本框：<input type="text" name="username" \>. 其他人正在通过 AJAX（隐式使用 jQuery）加载不同的页面，但需要知道此输入字段的值。如何从选项卡 2 或 3 的 ASP MVC 控制器中检索此值？这从根本上来说是一个坏方法吗？

~/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>

谢谢。

4

1 回答 1

1

更改控制器操作以接收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();
    }
}

更新事件href的选项卡（2 和 3）select。

$(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 );
            }
          }
      }
   });
});
于 2012-06-05T11:52:55.677 回答