javascript - 如何在 View 和 Controller 之间传递数据?

标签 javascript jquery html asp.net-mvc controller

这是我们的主页索引:

@model ELearning.Data.ELearningEgitimDTO
@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    @if (TempData["message"] != null)
    {
        <div class="alert alert-info" role="alert">@TempData["message"]</div>
    }
    <div>
        <div>
            @if (Model.EgitimTuru == 5)
            {
                <h1>Yangın Eğitimi</h1>
            }

            <table class="table table-responsive">
                <tr>
                    <td width="20%">Şirket Adı:</td>
                    <td width="80%">@Model.Name</td>
                </tr>
                <tr>
                    <td>Eğitimi Veren:</td>
                    <td>@Model.PersonelAdi</td>
                </tr>
                <tr>
                    <td>Eğitim Tarihi:</td>
                    <td>@Model.Tarih</td>
                </tr>
            </table>
        </div>
        <div>
            <table class="table table-responsive">
                <tr>
                    <td>Eğitim Konuları:</td>
                </tr>
                @foreach (var konu in Model.Adi)
                {
                    <tr>
                        <td><ul><li>@konu</li></ul></td>
                    </tr>
                }

            </table>
        </div>
    </div>
    <p class="text-right"><button onclick="getStartDate()" class="btn btn-primary btn-lg ">Eğitime Başla »</button></p>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

    <script type="text/javascript">

        function getStartDate() {
            
            $.post("/Video/GetStartDate",
                {
                    PerNr: @Model.PerNr,
                    StartDate: "",
                    EndDate: "",
                    EgitimFilesId: @Model.FileId
                });
        }
    </script>
</div>

这是视频索引:

@model WebApplication3.Models.VideoLogsModel
@{
    ViewBag.Title = "Video Page";
}

<div class="jumbotron">
    <div>Eğitime başlanan zaman:</div>
    <div id="startdate"></div>
    <div class="col-md-12 text-center">
        <video controls controlslist="nodownload" id="videoPlayer" width: 100% height: auto>
            <source src="~/Video/GetVideo" type="video/mp4">
        </video>
    </div>
    <br />
    <div class="text-right">
        <p id="button" onclick="egitimiBitir()" class="btn btn-danger btn-lg ">Eğitimi Bitir</p>
    </div>
    <script type="text/javascript">
        var vid = document.getElementById("videoPlayer");
        var button = document.getElementById("button");

        if (vid.played) {
            setInterval(function () { vid.pause(); }, 30000);
        }
        vid.addEventListener("ended", function() {
            button.className = "btn btn-success btn-lg "
        });

        function egitimiBitir() {

            if (vid.ended) {
                $.post("/Video/GetEndDate",
                    {
                        PerNr: @Model.PerNr,
                        StartDate= "",
                        EndDate: "",
                        EgitimFile sId: @Model.EgitimFilesId
                    });
            }
            else {
                document.getElementById("message").innerHTML = "Video tamamlanmadan eğitimi bitiremezsiniz.."
            }
        }
    </script>
</div>

这是我们的主要模型:

public class ELearningEgitimDTO
{
    public ELearningEgitimDTO() { }
    public ELearningEgitimDTO(string PerNr, int ID) 
    {
        this.ID = ID;
        this.PerNr = PerNr;
    }

    public int ID { get; set; }
    public string PerNr { get; set; }//katılımcıID
    public string Name { get; set; }//şirket adı
    public int EgitimTuru { get; set; }
    public DateTime Tarih { get; set; }//egitim tarihi
    public string PersonelAdi { get; set; } // eğitimi veren

    public int FileId { get; set; }
    public string FileName { get; set; }
    public string[] Adi { get; set; }
}

这是我们的模型:

public class VideoLogsModel
{
    public int EgitimFilesId { get; set; }
    public int PerNr { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }

}

这是我们的家庭 Controller :

public class HomeController : Controller
{
    public ActionResult Index(int EgitimId=4, string PerNr="2")
    {
        ELearningService service = new ELearningService();
        ELearningEgitimDTO egitim = new ELearningEgitimDTO(PerNr, EgitimId);
        return View(service.getInfo(egitim));   //eğitim bilgileri istenirken egitimId ve egitim kullanıcıdaki  eğitmenin perNr si verilmeli!!
    }
}

这是我们的视频 Controller :

public class VideoController : Controller
{ 

    public ActionResult Index(VideoLogsModel model)
    {
        return View(model);
    }
    public ActionResult GetVideo()
    {
        var memoryStream = new MemoryStream(System.IO.File.ReadAllBytes(@"C:\Users\cyare\Desktop\videoplayback.mp4"));
        //byte[] bytes = System.IO.File.ReadAllBytes(@"C:\Users\melik.DESKTOP-LQQAB68\Desktop\videoplayback.mp4");
        //System.IO.File.WriteAllBytes(@"C:\Users\melik.DESKTOP-LQQAB68\Desktop\videoplayback.mp4", bytes);
        return new FileStreamResult(memoryStream, "video/mp4");
    }
    /* [HttpPost]
     public ActionResult GetStartEndDate(VideoLogsModel logs)
     {
         DateTime startDate = logs.StartDate; //database de uygun tabloya yazılır
         return RedirectToAction("Index", "Video");
     }*/
    [HttpPost]
    public ActionResult GetStartDate(VideoLogsModel model)
    {
        model.StartDate = System.DateTime.Now;
        ELearningDosyaKullaniciDTO user = new ELearningDosyaKullaniciDTO();
        user.egitimFileID = model.EgitimFilesId;
        user.egitimKullanıcı = model.PerNr;
        user.startDate = model.StartDate;
        ELearningService service = new ELearningService();
        //service.CreateLogs(user);
        //return RedirectToAction("Index","Video",model);*/
        return RedirectToAction("Index", model);
    }
    [HttpPost]
    public ActionResult GetEndDate(VideoLogsModel model)
    {
        model.EndDate = System.DateTime.Now;
        ELearningDosyaKullaniciDTO user = new ELearningDosyaKullaniciDTO();
        user.egitimFileID = model.EgitimFilesId;
        user.egitimKullanıcı = model.PerNr;
        user.endDate = model.EndDate;
        ELearningService service = new ELearningService();
        service.UpdateLogs(user);
        TempData.Add("message", String.Format("Eğitiminiz Tamamlanmıştır!"));
        return RedirectToAction("Index", "Home");
    }
}

我的问题是如何将模型从主索引传递到视频 Controller ,然后传递到视频索引?

视频索引未运行。它转到视频索引,但然后再次运行主索引。

它还在按钮的 onclick 函数之前运行 egitimibitir() 函数。

最佳答案

您向您的服务发送一个 ajax 请求。 (endpoint => GetEndDate) 我认为你可以这样改变你的代码,

 $.ajax({
         type: "POST",
         url: "/Video/GetEndDate",  //your reqeust url
         contentType: "application/json; charset=utf-8",
         data: JSON.stringify({
               // your data here
         }),
         success: function (data) {
               // check state of data
               // after check window.location = // redirect url
         },
         error: function (data) {
               // handle exception 
         }
 });

您可以将 Controller 方法更改为数据 Controller 。 (不是 ActionResult。创建一个自定义结果对象,其中包含您的数据和成功状态。您可以在每次 ajax 请求返回状态和数据时使用此自定义结果对象)。如果执行“GetEndDate”方法时发生异常,则需要处理异常并将其显示给客户端。您将异常或成功完整响应发送给客户端( View )。 (您可以在ajax error: 函数中处理您的异常数据)

关于javascript - 如何在 View 和 Controller 之间传递数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51057913/

相关文章:

javascript - 建立一个测验 - 它有效,但仅限于第一个问题

javascript - 单击时选择元素立即关闭

javascript - 如何在 RubyRacer 中评估 HTML DOM 对象(如 "document")

javascript - MEAN.js 和 MEAN.io 的区别

javascript - Firebase getIdToken 返回对象

jQuery 表单登录检查没有重定向,密码和登录返回空白

html - 提交按钮跨浏览器定位

html - 在Xcode中解析XML文件时删除HTML标记

html - 有序列表 <OL>,使用 XHTML Strict 开始索引?

javascript - 在 JavaScript 中创建 For 循环