Member 13053943 Ответов: 1

Как показать всплывающее окно в моем представлении


Как я могу показать всплывающее окно, отображающее значения,которые я хочу разместить в базе данных по щелчку мыши,я хочу показать только студенческий билет и имя курса.

Что я уже пробовал:

это мой взгляд

@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>



это мой контроллер


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);
        }
    }
}

avinash ghadge

используйте всплывающее окно ajax

1 Ответов

Рейтинг:
2

sachin.vishwa90

Ну, похоже, вы используете bootstrap в качестве фреймворка пользовательского интерфейса. если это так, то вам не нужно много делать. Bootstrap уже имеет функциональность модального всплывающего окна.
JavaScript · Bootstrap[^] на ваш взгляд, вы должны включить модальный html

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

ваша кнопка будет находиться за пределами этого div, и по щелчку этого div вы можете использовать функцию, предоставляемую modal box
$("#myModal").modal('show');

после этой строки вы можете разместить свою форму. Поскольку вы публикуете форму после нажатия кнопки, это всплывающее окно исчезнет, как только ваша форма будет опубликована.
Дайте ему попробовать глава.