如何在我的视图中显示弹出窗口 [英] How to show pop up window in my view

问题描述

如何显示一个弹出窗口，显示我想在点击时发布到数据库中的值，我只想显示学生ID和coursname。



我尝试过：



这是我的视图

How can i show a pop up window displaying the values i want to post into a database on click,i only want to show the student id,and coursname.

What I have tried:

this is my veiw

@model UniScore.ViewModels.CoursesStudentViewModel

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

<h2>Add Course</h2>
<div>
    <h4>Student</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.FirstName)
        </dt>

        <dd>

        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.LastName)
        </dt>

        <dd>

        </dd>
    </dl>
</div>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()


    <div class="form-horizontal">@ViewBag.enr
    @*<input type="hidden" value="@ViewBag.enr" name="id_Student"/>*@ 
    @Html.HiddenFor(model => model.Student_Id  , new { id = "Student_Id", value ="@ViewBag.enr"})
    <div class="form-group">
        @Html.LabelFor(model => model.CourseName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.Course_Id, Model.Courses, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.CourseName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Mark, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Mark, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.Mark, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="AddCourse" class="btn btn-default"/>               
                   @*<button onclick="addcourse()">Add Course value="AddCourse"</button>*@
                </div>
            </div>
        </div>
       @*<script type="text/javascript">function addcourse() {
    alert('Course has been added ');
         }
       </script>*@
}

        <div>
            @Html.ActionLink("Back to List", "Index", "Students")
        </div>

这是我的控制器

this is my controller

namespace UniScore.Controllers
{
    public class CoursesStudentController : Controller
    {
        public uniscoreEntities db = new uniscoreEntities();
        
        // GET: CoursesStudent      
        public ActionResult AddCourse(int? id)
        {
            
            //Student_Course Sc = db.Student_Courses;
            CoursesStudentViewModel VM = new CoursesStudentViewModel();
            Student St = db.Students.Find(id);
            ViewBag.enr = St.id_Student;
            
            VM.Courses = new SelectList(db.Courses, "id_Course", "CourseName");

            
            return View(VM);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult AddCourse([Bind(Include = "Student_id,Course_id,Mark,Grade")] Student_Course SC)
        {
            //string SID = "Student_id";
            //int sid;
            // int.TryParse(SID, out sid);
            
            if (ModelState.IsValid)
            {
                // int student_id = Convert.ToInt32(Student_id);
                
                int Mark = 0;
                {                        
                    if (Mark < 100 || Mark > 80) { SC.Grade = "A"; }
                    else if (Mark < 80 || Mark > 70) { SC.Grade = "B"; }
                    else if (Mark < 60 || Mark > 69) { SC.Grade = "C"; }
                    else if (Mark < 50 || Mark > 59) { SC.Grade = "D"; }
                    else if (Mark < 10 || Mark > 49) { SC.Grade = "E"; }
                }
                
                db.Student_Course.Add(SC);
                db.SaveChanges();
                
                return RedirectToAction("AddCourse");
            }         
            return View(SC);
        }
    }
}

推荐答案

看来你正在使用bootstrap作为你的UI框架。如果是这样的话，你就不用多做。 Bootstrap已经具有Modal弹出功能。

JavaScript·Bootstrap [ ^ ]您必须包含模态html

Well it seems you are using bootstrap as your UI framework. if that is the case then you dont have to do much. Bootstrap already has functionality of Modal popup.
JavaScript · Bootstrap[^] in your View you have to include modal html

<div class="modal" id="myModal">
..
your html as you render in view.
..
</div>

您的按钮将在此div之外，点击该div后您可以使用模态框提供的功能

your button will be outside of this div and on click of that div you can use function provided by modal box

（ ＃myModal ）。modal（' show'）;

("#myModal").modal('show');

在此行之后您可以发布表单。由于您在点击按钮后发布表单，因此一旦您的表单发布，此弹出窗口将消失。

试一试。

after this line you can post your form. Since you are posting form after button click so this popup will disappear once your form is posted.
Give it a try chap.

这篇关于如何在我的视图中显示弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！