Reputation: 3429
How can i get Doctor Experience
tab panel after submit uploading image
Cs.Html:
@using (Html.BeginForm("AddDoctorImage", "Doctor", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<section>
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold">Upload Doctor Image</label>
@*<input type="file" name="postedFile" id="txtUploadImage" class="btn btn-rounded btn-file" style="cursor:pointer;" />*@
<span class="btn btn-rounded btn-file">
<span>Choose file</span>
<input type="file" name="postedFile" id="postedFile">
</span>
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold">Perview Image</label>
<img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
<a id="remove" onclick="javascript:ClearFileUploadControl();" style="display: none; cursor: pointer;">Remove</a>
</fieldset>
</div>
<div class="col-lg-4">
<input type="submit" name="ImageUpload" value="Upload image" class="btn btn-rounded btn-inline btn-success" />
<span style="color:green">@ViewBag.Message</span>
</div>
</div>
</section>
}
Controller:
[HttpPost]
public ActionResult AddDoctorImage(HttpPostedFileBase postedFile)
{
int docId = Convert.ToInt32(Session["docID"]);
if (postedFile != null)
{
string path = Server.MapPath("~/Doctor/");
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
var filename = docId.ToString() + ".png";
postedFile.SaveAs(path + filename);
ViewBag.Message = "File uploaded successfully.";
}
return javacript;
}
How to call bellow javascript function return
statement
script:
var linkHref = "tabs-1-tab-1";
$('#myLinks li a').removeClass('active');
$('#myLinks li')
.find('a[href="#' + linkHref + '"]')
.parent()
.next()
.find('a')
.tab('show')
.addClass('active')
.attr('data-toggle', 'tab');
$('a.nav-link').not('.active').css('pointer-events', 'none');
Upvotes: 1
Views: 2773
Reputation: 1792
There is OnSucess
option in BeginForm...which is where all actions to be done on success should be called.
@using (Ajax.BeginForm("AddDoctorImage", "Doctor", FormMethod.Post, new { enctype = "multipart/form-data" } , new AjaxOptions { OnSuccess = "ChangeTab" }))
on the client side...defince this function in Javascript
<script type="text/javascript">
function ChangeTab(result) { console.log(result)
var linkHref = "tabs-1-tab-1";
$('#myLinks li a').removeClass('active');
$('#myLinks li')
.find('a[href="#' + linkHref + '"]')
.parent()
.next()
.find('a')
.tab('show')
.addClass('active')
.attr('data-toggle', 'tab');
$('a.nav-link').not('.active').css('pointer-events', 'none');
}
</script>
And you have to add Unobtrusive Ajax for this action to happen
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
Upvotes: 6