调用mvc控制器而不回发mvc 5 angularjs答案

【问题标题】：call mvc controller without post back mvc 5 angularjs调用mvc控制器而不回发mvc 5 angularjs
【发布时间】：2017-08-30 13:51:56
【问题描述】：

我正在创建一个 asp.net mvc 5 web 应用程序（使用 angularjs）

在我的应用程序中，我正在调用控制器来下载用户图片，但整个页面正在刷新，

我不想回发特定页面

这就是我的控制器的外观

[HttpPost]
public ActionResult profilecompletion(FormCollection fc, HttpPostedFileBase file)
{
    // tbl_details tbl = new tbl_details();
    var allowedExtensions = new[] {
    ".Jpg", ".png", ".jpg", "jpeg",".doc",".docx",".pdf",".xlsx",".xls"
};
    string id = fc["name"].ToString();

    //tbl.Id = fc["Id"].ToString();
    //tbl.Image_url = file.ToString(); //getting complete url  
    //tbl.Name = fc["Name"].ToString();
    if (file==null)
    {

    }
    else
    {
        var fileName = Path.GetFileName(file.FileName); //getting only file name(ex-ganesh.jpg)  
        var ext = Path.GetExtension(file.FileName); //getting the extension(ex-.jpg)  
        if (allowedExtensions.Contains(ext)) //check what type of extension  
        {
            string name = Path.GetFileName(id + fileName); //getting file name without extension  
                                                           //string myfile = name + "_" + "" + ext; //appending the name with id  
                                                           // store the file inside ~/project folder(Img)  
            if (!Directory.Exists(Server.MapPath("~/userpic")))
            {
                Directory.CreateDirectory(Server.MapPath("~/userpic"));
            }
            var path = Path.Combine(Server.MapPath("~/userpic"), name);
            //tbl.Image_url = path;
            //obj.tbl_details.Add(tbl);
            //obj.SaveChanges();
            file.SaveAs(path);
        }
        else
        {
            ViewBag.message = "Please choose only Image file";
        }
    }
    return RedirectToAction("Dashboard", "Dashboard");
}

这是我的cshtml页面

@using (Html.BeginForm("profilecompletion", "user", FormMethod.Post, new
{
    enctype = "multipart/form-data"
}))
{
                <div class="row">
                    <div class="col-sm-8">
                        <span>Profile Pic</span>
                        <input id="imagepath" type="file"  file-model="profileimage" ng-text-change="changeimage()" name="file" />
                    </div>
                    <div class="col-sm-4">
                        <img id="myImg" src="#" alt="Choose image" style="height:100px; width:100px; border-radius:10px;" ng-hide="hidestat" ng-src="{{image}}"  />
                        @*<input id="imagepath" type="file" file-model="profileimage" class="form-control" />*@
                    </div>
                </div>
            <div class="button-container">
                <input type="submit" name="Update" class="btn btn-primary" ng-click="update()" title="save" />
            </div>
}

页面加载导致应用无法正确执行update() function

我需要在这里做什么来防止任何类型的回发或页面加载而不影响任何可编程性。

【问题讨论】：

标签： asp.net angularjs asp.net-mvc asp.net-mvc-5 pageload

【解决方案1】：

页面重新加载的原因是因为您使用了submit 按钮，顾名思义，该按钮将带有完整回发的表单提交到服务器。你可以改用普通的button：

<input type="button" name="Update" class="btn btn-primary" ng-click="update()" title="save" />

【讨论】：

【解决方案2】：

试试这个

<button type="button" name="Update" class="btn btn-primary" ng-click="update()" title="save" > Submit </button>

【讨论】：