ASP触发js调用另一个页面作为弹窗显示,定义一次js到处使用

10 篇文章 0 订阅
4 篇文章 0 订阅

最好是封装到某一个js里面才方便,不用到处都写一个太麻烦了
第一步:在全局JS中定义所需要的js代码 (一般在site.js中)

function OnEdit(data, title, url, postUrl, submitBtnText) {
    var action = postUrl ? postUrl : url;
    $("#SubimtForm").attr("action", action);
    $("#SubimtForm button[type=submit]").text(submitBtnText ? submitBtnText : "保存");
 
   //注意上面是  SubimtForm   下面是   SubimtModal
  
    $.get(url, data, function (html) {
        $("#SubimtModal .modal-title").html(title);
        $("#SubimtModal .modal-body").html(html);
        $("#SubimtModal").modal({ show: true });
    });
}

第二步:全局最外层加载页面定义所需弹窗窗体(一般在_Layout.cshtml中)

    <form action="@Url.Action("Edit")" method="post" class="form-horizontal" id="SubimtForm" enctype="multipart/form-data">
        <div class="modal fade" id="SubimtModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">
                        </h4>
                    </div>
                    <div class="modal-body">

                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                        <button class="btn btn-primary" type="submit">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

第三步:当作弹窗的页面,需要命名定义的SubmitModal的

<div class="center-block" style="width:500px;" id="SubmitModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="form-group">
             <label class="col-sm-3" for="UserName">
                  啊我是弹窗页面
              </label>
       </div>
</div>

第四步:在需要弹窗的页面或视图中引用js方法(在aspx或者cshtml中)

<div>
<button type="button"  onclick="javascript:OnEdit();"><i class="ace-icon fa fa-check"></i>弹窗把</button>
</div>



<script type="text/javascript">
    $(function () {
    });
    function OnEdit() {
        OnEdit({ id: @Model.Id }, "弹窗名字", "@Url.Action("Path")");
      //这里会跳到后端action控制器方法中,返回显示页面
    }
</script>

外加:后端接收返回方法,接口,控制器 ——这个应该都写了只提一下

//跟上卖弄 Url.Achtion中名字要一致  Path
[HttpPost]
public ActionResult Path(int id)
{
   return View();
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一些基本的代码示例,以便您了解如何使用 ASP.NET 框架创建登录注册页面调用数据库。请注意,这只是一个简单的示例,您需要根据您自己的需求进行修改和定制。 首先,您需要创建一个 ASP.NET 项目并添加一个名为 "Login.aspx" 的页面。 在 "Login.aspx" 页面中,您可以添加以下代码来创建一个简单的登录表单: ```html <form id="loginForm" runat="server"> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <input type="submit" value="Login"> </form> ``` 接下来,您需要在 "Login.aspx.cs" 文件中添加以下代码来处理提交表单的请求并验证用户凭据: ```csharp protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { string username = Request.Form["username"]; string password = Request.Form["password"]; if (ValidateUser(username, password)) { Session["username"] = username; // 将用户名存储在会话中 Response.Redirect("~/Default.aspx"); // 跳转到默认页面 } else { // 显示错误消息 errorMessage.Text = "Invalid username or password."; errorMessage.Visible = true; } } } private bool ValidateUser(string username, string password) { // TODO: 在此处添加数据库调用代码,验证用户名和密码是否正确 return true; // 在此处返回 true 或 false } ``` 在 `ValidateUser` 方法中,您需要添加代码来连接到数据库并验证用户凭据。下面是一个简单的示例: ```csharp private bool ValidateUser(string username, string password) { string connectionString = "Data Source=myServerAddress;Initial Catalog=myDataBase;User Id=myUsername;Password=myPassword;"; using (SqlConnection connection = new SqlConnection(connectionString)) { connection.Open(); using (SqlCommand command = new SqlCommand("SELECT COUNT(*) FROM Users WHERE username=@username AND password=@password", connection)) { command.Parameters.AddWithValue("@username", username); command.Parameters.AddWithValue("@password", password); int count = (int)command.ExecuteScalar(); if (count == 1) { return true; } else { return false; } } } } ``` 在上面的示例中,我们使用 `SqlConnection` 和 `SqlCommand` 类连接到数据库并执行 SQL 查询。如果查询返回一个匹配的行,则返回 `true`,否则返回 `false`。 接下来,您可以创建一个名为 "Register.aspx" 的页面来允许用户注册新帐户。 在 "Register.aspx" 页面中,您可以添加以下代码来创建一个简单的注册表单: ```html <form id="registerForm" runat="server"> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <label for="confirmPassword">Confirm Password:</label> <input type="password" id="confirmPassword" name="confirmPassword" required> <input type="submit" value="Register"> </form> ``` 接下来,您需要在 "Register.aspx.cs" 文件中添加以下代码来处理提交表单的请求并将新用户添加到数据库: ```csharp protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { string username = Request.Form["username"]; string password = Request.Form["password"]; string confirmPassword = Request.Form["confirmPassword"]; if (password == confirmPassword) { if (CreateUser(username, password)) { Session["username"] = username; // 将用户名存储在会话中 Response.Redirect("~/Default.aspx"); // 跳转到默认页面 } else { // 显示错误消息 errorMessage.Text = "An error occurred while creating your account."; errorMessage.Visible = true; } } else { // 显示错误消息 errorMessage.Text = "Passwords do not match."; errorMessage.Visible = true; } } } private bool CreateUser(string username, string password) { // TODO: 在此处添加数据库调用代码,将新用户添加到数据库 return true; // 在此处返回 true 或 false } ``` 在 `CreateUser` 方法中,您需要添加代码来连接到数据库并将新用户添加到数据库中。下面是一个简单的示例: ```csharp private bool CreateUser(string username, string password) { string connectionString = "Data Source=myServerAddress;Initial Catalog=myDataBase;User Id=myUsername;Password=myPassword;"; using (SqlConnection connection = new SqlConnection(connectionString)) { connection.Open(); using (SqlCommand command = new SqlCommand("INSERT INTO Users (username, password) VALUES (@username, @password)", connection)) { command.Parameters.AddWithValue("@username", username); command.Parameters.AddWithValue("@password", password); int rowsAffected = command.ExecuteNonQuery(); if (rowsAffected == 1) { return true; } else { return false; } } } } ``` 在上面的示例中,我们使用 `SqlConnection` 和 `SqlCommand` 类连接到数据库并执行 SQL 查询。如果查询成功插入一行,则返回 `true`,否则返回 `false`。 这是一个简单的示例,希望能够帮助您了解如何使用 ASP.NET 框架创建登录注册页面调用数据库。如果您有任何问题或需要进一步帮助,请告诉我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值