Question

我正在学习MVC，并且已经开始研究一项压倒性的任务，试图弄清楚如何在jQuery手风琴选项卡中从局部视图呈现登录形式，而无需提交整个页面。

我收录了我的页面图片。

您的订单标签 this is the page I am working on

完整订单标签 enter image description here

第一个标签：＆＃34;您的订单＆＃34;右侧包含一个小型登录表单，其中包含一个按钮，用于显示＆＃34;登录＆＃34;。

第五个标签：＆＃34;完成订单＆＃34;包含一个按钮＆＃34;完成订单＆＃34;

当我单击第一个选项卡上的按钮登录时，执行的代码是完成订单按钮的代码，这会导致许多错误，因为后续选项卡上收集的所有信息都不存在，因为完成订单获得点击。

我想请求帮助，想办法分离这些按钮的事件，并且能够在不运行其他事件的代码的情况下登录。

我不知道如何处理这个问题，这是我第一次使用这种架构。

如果我可以获得有关如何执行登录方法的帮助，只需显示一个显示＆＃34;成功的简单div！这对我有很大的帮助。

非常感谢！

推荐后的代码编辑

jQuery：

        function ShoppingCartLogin() {
        $("#Email").val();
        var userid = $("#YourOrder_MainLoginEmail").val();
        //var userid = document.getElementById('UserName').value;
        var password = $("#YourOrder_MainLoginPassword").val();
        //var password = document.getElementById('Password').value;
        alert(userid);
        var url = "/ShoppingCart/ShoppingCartLogin";
        $("#btnLogin").val('Sign In');
        $.ajax({
            url: url,
            data: { userId: userid, pass: password },
            cache: false,
            type: "POST",
            success: function (data) {
                if (data == "1") {
                    alert("Successfull login.");
                } else {
                    alert("Invalid user id and password.");
                }
                $(".YourOrder_MainLoginEmail").attr({ 'value': '' });
                $(".YourOrder_MainLoginPassword").attr({ 'value': '' });
            },
            error: function (reponse) {
                alert("error : " + reponse);
            }
        });
        $("#btnlogin").val('Sign In');
    }

PartialView标记

<div class="YourOrder__inputEmail">
Html.TextBoxFor(m => m.UserName, new { @class = "YourOrder_MainLoginEmail", placeholder = "Email    
Address", @id = "YourOrder_MainLoginEmail" })
</div>
<div>
<div>
Html.PasswordFor(m => m.Password, new { @class = "YourOrder_MainLoginPassword", placeholder =      
"Password", @id = "YourOrder_MainLoginPassword" })
</div>
</div>

控制器代码：

 public ActionResult ShoppingCartLogin(LoginModel model, string returnUrl)
    {
        if (ModelState.IsValid)
        {
            using (Entities db = new Entities())
            {
                var user = (from u in db.Users where u.Email == model.UserName && u.Password == model.Password && u.IsActive select u).FirstOrDefault();

                if (user == null)
                {
                    ModelState.AddModelError("", "The user name or password provided is incorrect.");
                    return View(model);
                }

                List<string> roles = new List<string>();
                if (user.IsAdmin)
                {
                    roles.Add("Admin");
                }
                if (user.IsOrdersAdmin)
                {
                    roles.Add("Orders");
                }
                if (user.IsStoreAdmin)
                {
                    roles.Add("Stores");
                }

                user.LastLoginDate = DateTime.Now;
                db.SaveChanges();

                FormsAuthentication.SetAuthCookie(user.ID.ToString(), model.RememberMe);
                var authTicket = new FormsAuthenticationTicket(
                    1,                              // version
                    user.ID.ToString(),             // user name
                    DateTime.Now,                   // created
                    DateTime.Now.AddMinutes(90),    // expires
                    model.RememberMe,               // persistent?
                    string.Join(",", roles)          // can be used to store roles
                    );

                string encryptedTicket = FormsAuthentication.Encrypt(authTicket);

                var authCookie = new HttpCookie(FormsAuthentication.FormsCookieName, encryptedTicket);
                HttpContext.Response.Cookies.Add(authCookie);

            }

            return RedirectToLocal(returnUrl);
        }

        // If we got this far, something failed, redisplay form
        ModelState.AddModelError("", "The user name or password provided is incorrect.");
        return View(model);
    }

当代码执行时，虽然文本框中有值，但LoginModel的null属性为UserName，Password。

代码转到：

        // If we got this far, something failed, redisplay form
        ModelState.AddModelError("", "The user name or password provided is incorrect.");
        return View(model);

Answer 1

对于分离两个按钮，将两个不同的id放在两个按钮上，假设选项卡0（您的订单）的按钮ID为btnYourOrder，选项卡5（完成订单）按钮ID为btnCompleteOrder，然后您编写两个jquery点击事件{{1} }和$("#btnYourOrder").click(function(){<Your Code>});现在无论你想要执行什么，你都可以输入他们的按钮事件。

要执行局部视图（非完整回发），您可以使用以下代码

$("#btnCompleteOrder").click(function(){<Your Code>});

divOrders - ＆GT;将一个带有id divOrders的div放在要显示部分视图数据的位置。

如果您需要任何其他帮助，或者如果您不理解，请告诉我，我很乐意为您提供帮助。

由于 Raviranjan

$.ajax(
            {
                url: <Your partial View URL>,
                type: "POST",
                contentType: 'text/html',
                success: function (data) {
                    $("#divOrders").html(data);                  
                },
                error: function (ex) {
                }
            }
            );

Answer 2

请勿使用提交，使用<form action=''…并使用loginForm()

声明$.post函数jQuery <button onclick='loginForm()'>Submit </button>来自这些字段的凭据

Answer 3

您可以通过引用按钮名称

在后期操作参数中获取按钮值

例如，如果您的按钮定义如下，

<button type="submit" id="btnLogin" name="Command" value="Login">Login</button>
<button type="submit" id="btnCompleteOrder" name="Command" value="CompleteOrder">Complete Order</button>

您可以获取按钮值，并根据该值选择要执行的代码

[HttpPost] 
public ActionResult PostAction(Model model,String Command) 
   { 
      If(Command == "Login")
          //Send them to login screen
          RedirectToAction("Login","LoginController");

      Else If(Command == "CompleteOrder")
        {
          //Complete your order processing
        }
      Else
        {
          //Some default action
        }

  Return View("Index");

   }

Answer 4

我有两个由php代码生成的按钮，我想知道单击了哪个按钮。我在同一个班上用过它们。 php代码如下

$class = "qdiv";
$type="button";
$click="ask(".$j.")";   //put variable to have a record of question asked

echo '<button id="'.$j.'" type="'.$type.'" class="'.$class.'" onclick="'.$click.'">'; 
echo $row['question'];
echo '</button>';

在上面的代码中，我给出了单独的ID，但由于某种原因，该ID无法被JavaScript读取（我猜这是我按类询问ID的原因，而一个类具有不同的ID），所以我有onclick = ask（j）函数和j返回唯一数字以区分单击哪个按钮。

java脚本代码如下。

function ask(qid) 
{
//var qid=document.getElementsByClassName("qdiv").id;
document.getElementById("divresult").innerHTML=qid;
}

如何区分两个提交按钮

4 个答案: